解决百度地图中点击标记点的label会穿透到地图上改变当前标记点的位置问题

最新推荐文章于 2026-06-24 10:08:45 发布

原创

最新推荐文章于 2026-06-24 10:08:45 发布 · 2k 阅读

标签

#javascript #js

收录于

本文介绍了一种在地图应用中实现标记点添加及label提示框交互的方法。通过判断点击事件的目标，避免了label穿透问题，并确保了良好的用户体验。

项目中有这样一个需求：点击地图添加标记点和label提示框，点击提示框中的按钮可以触发一个点击事件（如图一），并可在地图上重新选点标记。（上个点会被清除）
在这个过程中遇到了一个问题是点击label会穿透到地图上改变当前标记点的位置。期间尝试过阻止冒泡这种方法，虽然有效果，但是关掉‘’创建摆摊‘’点击事件触发的弹框后，重新选点会发生需要点击两次地图才能重新添加标记的bug。
图一：
在这里插入图片描述

解决方案
找了好久的办法，发现可以这样解决。不需要阻止冒泡，只需要在地图监听事件中加上一个判断，代码如下：

//地址解析
      let geocoder = new BMap.Geocoder();
      //添加点击事件监听
      map.addEventListener('click', function(e) {
   
   
        //如果是地图点击事件就进行以下操作（就是if这一行的判断）
        if (e.overlay == null) {
   
   
          console.log('触发地图点击');
          let allOverlay = that.map.getOverlays();
          //清除上次点圈
          for (let i = 0; i < allOverlay.length -