uni-app nvue页面的map组件，label设置x和y偏移值无效

uni-app nvue页面的map组件，label设置x和y偏移值无效

操作步骤：

  1. 创建nvue页面
  2. 使用地图组件
  3. 创建markers

预期结果：

正常调整x和y值，使label居中显示在marker下方

实际结果：

无法变更x和y值label显示在marker下方，左侧与marker中心对齐

bug描述：

nvue页面使用map组件，设置label时，ios端无法改变label位置，android端正常；也尝试过anchorX和anchorY，anchorX有效，但是改不了y值，label会和markers重叠

marker.push({  
    id: 0,  
    latitude: self.latitude,  
    longitude: self.longitude,  
    iconPath: iconPath,  
    width: 50,  
    height: 50,  
    anchor: {  
        x: .5,  
        y: 1  
    },  
    callout: {  
        content: "描述信息",  
        color: "#303030",  
        fontSize: 14,  
        borderRadius: 5,  
        bgColor: "#FFFFFF",  
        padding: 8,  
        display: "ALWAYS",  
        textAlign: "left"  
    },  
    label: {  
        content: "123456",  
        color: "#FFF",  
        fontSize: 12,  
        x: -26,  
        y: 16,  
        // anchorX: -26,  
        // anchorY: -116,  
        bgColor: "#303030",  
        borderRadius: 3,  
        padding: 3,  
        textAlign: "center"  
    }  
});  
self.markers = marker;
信息项 内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 20H2
HBuilderX类型 正式
HBuilderX版本 3.1.8
手机系统 iOS
手机系统版本 iOS 12.1
手机厂商 苹果
手机机型 6s
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue页面的map组件，label设置x和y偏移值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

HBuilderX 3.1.10 alpha 已修复

更多关于uni-app nvue页面的map组件，label设置x和y偏移值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已确认，label的偏移值改用anchorX和anchorY后能正常使用

请上传一下完整的示例工程，方便排查

附件已上传，请查收

回复 acio: 1

感谢反馈，bug已确认

好的

ios能正常显示吗 我ios自定义标记地点显示不出来 安卓正常

这是一个已知的iOS平台上的兼容性问题。在nvue页面的map组件中，iOS端对label的x和y偏移值支持存在缺陷，而Android端表现正常。

从你的代码来看，使用anchorX和anchorY参数是更合适的解决方案，但需要注意坐标计算方式。label的锚点坐标是相对于marker中心点的偏移，正值向上向左，负值向下向右。

建议暂时通过调整anchorY值来实现垂直方向的位置控制，结合anchorX实现水平居中。由于iOS端的限制，可能需要针对不同平台设置不同的偏移值：

label: {
    content: "123456",
    color: "#FFF",
    fontSize: 12,
    anchorX: -26,
    anchorY: -16, // 根据实际效果调整这个值
    bgColor: "#303030",
    borderRadius: 3,
    padding: 3,
    textAlign: "center"
}
回到顶部