- 漏刻有时百度地图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;
}
@漏刻有时