zoukankan      html  css  js  c++  java
  • 百度地图JavaScript如何清除指定类型的覆盖物

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

    那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 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;
                }
            }
        }
  • 相关阅读:
    Excel 相对引用与绝对引用
    SQL Update 巧用
    Delphi 多步操作产生错误,请检查每一步的状态值
    cxGrid 增加序号 (非数据库绑定模式) (测试通过)
    delphi cxgrid 使用方法
    如何使满足条件的数据显示不同的颜色
    Delphi中Format与FormatDateTime函数详解
    常用的日期时间函数
    100m和1000m网线的常见制作方法
    基于请求的分布式互斥算法
  • 原文地址:https://www.cnblogs.com/liugx/p/9550148.html
Copyright © 2011-2022 走看看