uni-app map callout显示和点击异常

uni-app map callout显示和点击异常

测试过的手机：

华为mate 20 pro 鸿蒙2.0.0

操作步骤：

必现数据格式{
"id": 9,
"iconPath": "/static/map/yuan.png",
"latitude": 29.41927075,
"longitude": 120.00575275,
"width": 85,
"height": 85,
"callout": {
"content": "黄宅镇\n4",
"textAlign": "center",
"color": "white",
"bgColor": "red",
"anchorY": 70,
"fontSize": 15,
"display": "ALWAYS"
}
}

预期结果：

callout直接点击可以点击 切callou不在icon之下

实际结果：

callout点击和显示异常

bug描述：

地图mark标记点callout和icon重合时，在华为手机上点击callout，callouttap要点击两次才能有效果，而且第一次点击callout会隐藏在icon之下

图像


更多关于uni-app map callout显示和点击异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

方便发个复现的demo么？

更多关于uni-app map callout显示和点击异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已发 在楼下

回复 1***@163.com: 这个暂时解决不了，这个是高德的行为，重叠的时候会由zindex小的来接收事件，建议不要把callout和marker重叠在一起，使用别的方式来实现。

回复 DCloud_Android_THB: 能推荐下还能用什么方式实现吗 目前还能用什么方式实现

回复 1***@163.com: 重叠不是不行了

include-points和uni.createMapContext(“map”, this).includePoints都无效 麻烦也看下 由于无效进去后只能看到一个 缩放下就能看到所有callout 测试机是华为Mate 20 Pro 系统是 Harmony OS 2.0.0

根据您描述的问题，这是uni-app地图组件在华为鸿蒙系统上的一个已知兼容性问题。以下是具体分析和解决方案：

  1. 问题原因：
  • 鸿蒙系统对地图组件的z-index层级处理存在差异
  • callout和marker图标在点击事件传递上有冲突
  1. 解决方案： 调整callout的anchorY值，确保它不会与图标重叠。建议修改为：
"callout": {
  "content": "黄宅镇\n4",
  "textAlign": "center",
  "color": "white",
  "bgColor": "red",
  "anchorY": -20,  // 改为负值使callout显示在图标上方
  "fontSize": 15,
  "display": "ALWAYS"
}
回到顶部