当前位置：首页 > news >正文

漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题

news 2025/8/29 10:49:25

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案
漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关
漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标
漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解决方案
漏刻有时百度地图API实战开发(5)区域限制移动端鬼畜抖动的解决方案
漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
漏刻有时百度地图API实战开发(7)JavaScript开源库几何运算判断点是否在多边形内（电子围栏）
漏刻有时百度地图API实战开发(8)圆形区域周边搜索地图监听事件(覆盖物重叠显示层级\图像标注监听事件、setZIndex和setTop方法)

多个标注覆盖层级导致不能响应点击的问题

在这里插入图片描述
当多个标注（marker）位置比较近且地图级别比较小，标注直接相互覆盖了。在下发的标注无法响应鼠标的点击事件。

解决方案：设置 marker.setTop(true)属性，当鼠标移到标注上时，标注自动调整到第一层；鼠标移除再返回最后一层。

 marker.addEventListener('mouseover', function (e) {marker.setTop(true);});marker.addEventListener('mouseout', function (e) {marker.setTop(false);});

/*
* 定义图标类型
* point,中心点坐标
* cat,图标类型，01234...
* */
function addMarker(point, cat) {var imgUrl = 'static/rooted/images/icon' + cat + '.png';var myIcon = new BMap.Icon(imgUrl, new BMap.Size(23, 25));var marker = new BMap.Marker(point, {icon: myIcon});marker.addEventListener('mouseover', function (e) {marker.setTop(true);});marker.addEventListener('mouseout', function (e) {marker.setTop(false);});map.addOverlay(marker);return marker;
}