由于一个地图中有很多种类型的覆盖物,由于某个覆盖物(一般是自定义)整个地图中只允许出现一次
那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 instanceof ,部分代码如下(红色代码为重点 ):
PoiMarker.prototype = new BMap.Overlay(); PoiMarker.prototype.initialize = function (map) { this._map = map; const div = this._div = document.createElement("div"); div.style.zIndex = BMap.Overlay.getZIndex(500); div.style.position = "absolute"; div.style.background = "url(http://s.xxx.com/images/bcg-green.png) no-repeat bottom"; div.style.cursor = "pointer"; div.style.height = "42px"; const img = document.createElement("img"); img.src = this._img div.style.zIndex = BMap.Overlay.getZIndex(400); img.style.height = "36px"; img.style.width = "36px"; img.style.borderRadius = "26px"; img.style.border = "2px solid #72b80a"; div.appendChild(img); // POI点击事件 div.onclick = (e) => { // 禁止事件冒泡 const oEvent = e || event; oEvent.cancelBubble = true; // 删除其它的 poiInfoWindowMarker //获取地图上所有的覆盖物 const allOverlay = this._map.getOverlays(); for (const item of allOverlay) { if (item instanceof PoiInfoWindowMarker) { this._map.removeOverlay(item); } } const poiInfoWindowMarker = new PoiInfoWindowMarker(this._point, this._img); // 添加节点数覆盖物到地图上(并将覆盖物注册) this._map.addOverlay(poiInfoWindowMarker); }; map.getPanes().labelPane.appendChild(div); return div; }; PoiMarker.prototype.draw = function () { const map = this._map; const pixel = map.pointToOverlayPixel(this._point); this._div.style.left = (pixel.x - 18) + "px"; this._div.style.top = (pixel.y - 40) + "px"; }; this.poiMarker = PoiMarker
附带一张GIF图解:
*** 百度地图给出了根据label中的content比较后删除覆盖物(不太符合我需要的场景)
http://lbsyun.baidu.com/jsdemo.htm#c1_17
function deletePoint(){ var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length -1; i++){ if(allOverlay[i].getLabel().content == "我是id=1"){ map.removeOverlay(allOverlay[i]); return false; } } }