百度地图JavaScript如何清除指定类型的覆盖物

Posted 2021-01-01 Hello,World!

由于一个地图中有很多种类型的覆盖物，由于某个覆盖物（一般是自定义）整个地图中只允许出现一次

那第一想到的就是，每次创建这个类型的覆盖物时先清除这一类型的覆盖物，比较简单判断覆盖物的类型 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;
            }
        }
    }