uni-app app端安卓中map的label会被marker覆盖

uni-app app端安卓中map的label会被marker覆盖

测试过的手机

华为p30和苹果xs

示例代码：

id: index,
latitude: item.latitude,
longitude: item.longitude,
iconPath: '../../static/map/circle.png',
label: {
content: item.total.toString(),
color: '#3D73DD',
fontSize: '16rpx',
bgColor: '#ffffff',
borderRadius: 50,
anchorX: item.total.toString().length==1?-5:-8,
anchorY: -32
},
width: 34,
height: 40,
customObj: {
areaKey: 'city',// 请求的市，下一步就该用市去查详细点
areaValue: item.city
}
});

操作步骤：

app端安卓中map的添加marker，然后设置label，移动label到marker上，label会被marker覆盖

预期结果：

app端安卓中map的label不会被marker覆盖 ，现在ios正常安卓不正常

实际结果：

app端安卓中map的label会被marker覆盖

bug描述：

app端安卓中map的label会被marker覆盖

Image 1 Image 2

uni-share.zip


更多关于uni-app app端安卓中map的label会被marker覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html

23 回复

使用 anchorX，anchorY，x，y已废弃，升级最新的 3.1.13 版本测试一下吧

更多关于uni-app app端安卓中map的label会被marker覆盖的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，我已将版本升级到3.1.13.20210514但是依然没有生效，和之前一样，只是anchorX生效了，anchorY不生效，我是动态push的marker点，不知道是我操作有问题，还是uni出现了bug,代码如下（response为我请求的后台数据） response.forEach((item, index) => { this.covers.push({ id: index, latitude: item.latitude, longitude: item.longitude, iconPath: ‘…/…/static/map/circle.png’, label: { content: item.total.toString(), color: ‘#3D73DD’, fontSize: ‘16rpx’, bgColor: ‘#ffffff’, borderRadius: 50, anchorX: item.total.toString().length == 1 ? -5 : -8, anchorY: -32 }, width: 34, height: 40, customObj: { areaKey: ‘province’, // 请求的省份，下一步就该用身份查市 areaValue: item.province } }); });

麻烦尽快查看一下，项目着急上线

经过测试对比，ios中anchorY不生效，安卓中anchorX，anchorY均生效，但是安卓中，marker会把label挡住，这问题应该怎么解决啊？都要哭出声了

还有ios中，label的fontsize单位用rpx在ios不生效，在安卓上生效，borderRadius在两端也有差别，麻烦你们检查相关的问题，然后把文档更新一下啊

回复 谭小谭: 提供完整的示例工程，把问题都呈现一下吧

回复 DCloud_iOS_XHY: 好的，晚点我写个demo上传

回复 DCloud_iOS_XHY: demo已上传，望回复

你好，demo已上传，我把包删除了，package-lock.json删除了，重新下包了，ios anchorY能生效了，但是在安卓中依然存在label被maker覆盖的问题，导致我安卓端无法实现点聚合的功能，ios现在问题都解决了

android Label会被marker覆盖已确认

好的，麻烦尽快修复一下，公司项目暂时把这块功能屏蔽了，等你们更新了

HX3.1.17已修复

你好，我刚更新到了最新版本的hb，运行我上传的demo,问题确实解决了，但是我打自定义基座运行，label被marker遮挡的问题依然没有得到解决啊，是我哪里操作错误了吗？目前hb版本3.1.18.20210609

回复 谭小谭: 可能是你的自定义基座没有 更新 卸载重新安装或者重新云打包一个基座

回复 DCloud_Android_ST: 可以了，谢谢官方，我是用cli创建的项目，刚开始，我只云打包更新了基座，没有更新node_model和pakage-lock，现在同时更新了，问题得到了解决，非常感谢

回复 DCloud_Android_ST: 但是安卓端还是有一些问题，我做的点聚合效果，在ios体验还是很不错，但是在安卓端，出现了label中content内容不能及时更新的问题，因为点击，放大缩小请求不同接口获取不同数据，label展示不对，很尴尬

回复 谭小谭: 我版本是3.1.18，重新安装了基座，label还是被marker遮挡啊，也是使用的anchorX，anchorY，怎么回事

我这只成功后，x,y不能自适应手机

点击marker后，marker还是会把label挡住，Hbuilder 版本3.2.12，测试设备：Android

在单独发帖反馈吧

回复 DCloud_iOS_XHY: 你好，请问label被marker的问题如何修复，我HX版本是3.3.13,，在h5和安卓lable都会被marker遮挡。

你好，请问label被marker的问题如何修复的，我HX版本是3.3.13,，在h5和安卓lable都会被marker遮挡。

这是一个已知的uni-app地图组件在安卓端的渲染层级问题。在安卓平台上，map组件的marker会覆盖label，而在iOS上表现正常。

问题原因： 安卓端原生地图控件的渲染层级顺序与iOS不同，marker的z-index默认高于label，导致label被遮挡。

解决方案：

  1. 调整marker尺寸：将marker的width和height设置为比实际图标更小的值，例如从34×40调整为20×20，但保持iconPath不变
  2. 修改anchor偏移：重新计算label的anchorX和anchorY，确保label位置避开marker覆盖区域
  3. 使用callout替代：考虑使用marker的callout属性代替label，callout在安卓端的层级表现更稳定
// 示例调整
width: 20,
height: 20,
label: {
  content: item.total.toString(),
  anchorX: 0, // 根据实际效果调整
  anchorY: -20 // 根据实际效果调整
}
回到顶部