百度地图API中解决图层覆盖时的点击事件bug问题

关键词

百度地图API，zindex，vue组件，回调函数，overlay

问题发现

在百度地图API中，如果要为某个控件增加点击事件（如点击marker出现弹窗的话），那末在添加事件后点击该控件则会出现点击该控件的同时，也会触发点击地图的点击事件，造成使用不便

如图所示

• 期望实现的功能：点击地图标记marker，点击marker出现上传视频的弹窗
• 实际出现的问题：点击marker后也会触发地图的点击事件，也会多标记一个marker

解法探寻

为解决该问题参考了几篇文章：

百度地图API的图层zIndex问题_baidu mapv zindex-CSDN博客

百度地图（icon，zIndex）-CSDN博客

z-index - CSS：层叠样式表 | MDN

百度地图JSAPI 2.0类参考

百度地图api 密钥获取_百度地图api 密匙对应地址-CSDN博客

归纳：通过修改控件或者修改z-index的方法使控件覆盖地图

问题：即使将API版本改到2.0，对应上文的开发手册也无法完全解决问题（能实现vue组件覆盖地图，但不能实现标签覆盖地图）

最终解决

回调函数与overlay

使用事件的回调函数来判断

由于地图触发点击事件时，点击事件本身会判断覆盖物overlay的类型（地图or控件）

然后再触发对应控件的逻辑

代码示例：

初始化地图

initMap() {
      // 初始化百度地图
      window.map = new BMapGL.Map('container');
      window.map.centerAndZoom(new BMapGL.Point(116.40410462508976, 39.93282073018402), 19);
      window.map.enableScrollWheelZoom(true);
      window.map.setTilt(55);
      window.map.setHeading(64.5);
      var scaleCtrl = new BMapGL.ScaleControl();
      window.map.addControl(scaleCtrl);
      var zoomCtrl = new BMapGL.ZoomControl();
      map.addControl(zoomCtrl);
      var cityCtrl = new BMapGL.CityListControl();
      window.map.addControl(cityCtrl);
      window.map.addEventListener('click', this.clickMap);
    },

选择逻辑类型

clickMap(e){//功能：判断点击的是地图marker图标还是地图实体
      var overlay = e.overlay;
      if (overlay) {
        console.log("点击了marker", overlay);

      }else {
        // 点击了地图空白区域
        console.log("点击了地图空白区域");
        this.selectPoint(e)//点击地图空白区域的代码逻辑
      }
    },

功能测试：

点击marker本身，不会实现对地图的点击

如有错漏，欢迎讨论