解决移动端百度地图多边形覆盖物无法点击的问题

195 阅读1分钟
  1. 首先初始化地图时,需要初始化设置地图绘制方式 drawer
 this.Map = new BMap.Map(this.$refs.map, {
        drawMargin: 100,
        drawer: BMAP_SVG_DRAWER_FIRST,
 });
  1. 监听地图touseend方法,并且给覆盖物图层添加自定义事件
// TODO: 触摸移动时触发此事件 此时开启可以拖动
this.Map.addEventListener("touchmove", function (e) {
        that.Map.enableDragging();
});
// TODO: 触摸结束时触发次此事件  此时开启禁止拖动
this.Map.addEventListener("touchend", function (e) {
    that.Map.disableDragging();
    if (e.overlay && e.overlay.customClickHandler_) {
      e.overlay.customClickHandler_.call(e.overlay, e);
    }
});
  1. 绘制多边形,并且实现多边形的点击事件
 let polygon = new BMap.Polygon(points, {
      strokeColor: "blue", // 边线颜色
      // fillColor: 'blue', // 填充颜色
      strokeWeight: 2, // 边线宽度
      strokeOpacity: 0.5, // 边线透明度
      fillOpacity: 0.5, // 填充透明度
});
    // 将多边形添加到地图中
    this.Map.addOverlay(polygon);
    // 添加点击事件  BMap地图下
    polygon.customClickHandler_ = function (e) {
      console.log(e);
      that.highlightPolygon(polygon);
    };