百度地图覆盖物添加引发的事件穿透

在百度地图上添加了自定义覆盖物,通过点击marker会弹出覆盖物。但是点击覆盖会奇怪的点击到被覆盖的marker,一开始以为是冒泡,但是去掉所有冒泡还是无果。最后发现在添加覆盖物的时候有个添加覆盖物的容器的选项。

此类表示地图上所有覆盖物的容器集合,没有构造函数,通过对象字面量形式表示。通过Map的getPanes方法可获得该对象实例。

属性 类型 描述
floatPane HTMLElement 信息窗口所在的容器
markerMouseTarget HTMLElement 标注点击区域所在的容器
floatShadow HTMLElement 信息窗口阴影所在的容器
labelPane HTMLElement 文本标注所在的容器
markerPane HTMLElement 标注图标所在的容器
markerShadow HTMLElement 标注阴影所在的容器
mapPane HTMLElement 折线、多边形等矢量图形所在的容器

之前用的是markerPane,仅在当前marker处添加,这里我需要在mark的上层或地图层添加,因此改成floatPane或markerMouseTarget即可。初始化的代码如下:

neInfoWindow.prototype.initialize = function(map) {
  this._map = map;
  // 创建div元素,作为自定义覆盖物的容器
  this._div = document.getElementById(this._dom);
  // 将div添加到覆盖物容器中
  map.getPanes().markerMouseTarget.appendChild(this._div);
  return this._div;
};

猜你喜欢

转载自blog.csdn.net/Mayness/article/details/86018137