huiyan-fe / BMapGLLib

百度地图JSAPI GL版JavaScript开源工具库
MIT License
346 stars 126 forks source link

map.clearOverlays() 无法清理多个RichMarker #24

Open qinmao opened 2 years ago

qinmao commented 2 years ago

var map = new BMapGL.Map("container"); map.centerAndZoom(new BMapGL.Point(116.401952, 40.032704), 12); map.enableScrollWheelZoom();

var htm1 =
    "<div id='overLay' style='width:93px;height:116px; background:url(//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back.png) left top no-repeat;position: absolute;'>" +
    "<img style='margin-left:9px;margin-top: 8px;' src='//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/small.jpg' />" +
    "</div>",
    myRichMarker1 = new BMapGLLib.RichMarker(htm1, new BMapGL.Point(116.30816, 40.056863), {
        "anchor": new BMapGL.Size(-47, -116),
        "enableDragging": true
    });
map.addOverlay(myRichMarker1);

var html2 =
    '<div style="position: absolute; margin: 0pt; padding: 0pt; width: 80px; height: 26px; left: -10px; top: -35px; overflow: hidden;">' +
    '<img id="rm3_image" style="border:none;left:0px; top:0px; position:absolute;" src="http://bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back1.png">' +
    '</div>' +
    '<label class=" BMapLabel" unselectable="on" style="position: absolute; -moz-user-select: none; display: inline; cursor: inherit; border: 0px none; padding: 2px 1px 1px; white-space: nowrap; font: 12px arial,simsun; z-index: 80; color: rgb(255, 102, 0); left: 15px; top: -35px;">$ 20 B</label>',
    myRichMarker2 = new BMapGLLib.RichMarker(html2, new BMapGL.Point(116.402922, 39.99908), {
        "anchor": new BMapGL.Size(-18, -27),
        "enableDragging": true 
    });
map.addOverlay(myRichMarker2);

myRichMarker2.addEventListener("onmouseover", function (e) {
    document.getElementById("rm3_image").src = "//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back2.png";
});
myRichMarker2.addEventListener("onmouseout", function (e) {
    document.getElementById("rm3_image").src = "//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back1.png";
});

// 测试代码 map.addEventListener('click',(e)=>{ // map.clearOverlays() 该清理方法只能清理一个marker ,原因不明

// 清除多个只能手动一个一个清理 const overlays=map.getOverlays() console.log(overlays) overlays.forEach(overlay=>{ map.removeOverlay(overlay) })

})

Mengmianxiaoxia commented 2 years ago

确实存在这个问题,用了你的解决方案。但是defaultContent依然不清楚。还手动清楚一下 document.querySelectorAll("#platform > div:nth-child(2) > div:nth-child(1) > div").forEach(ele=>{ ele.remove() }) 路书会有一些问题。

qinmao commented 2 years ago

可以保存返回的实例,然后挨个清除,他这个估计是没保留返回的overlay实例导致的问题

确实存在这个问题,用了你的解决方案。但是defaultContent依然不清楚。还手动清楚一下 document.querySelectorAll("#platform > div:nth-child(2) > div:nth-child(1) > div").forEach(ele=>{ ele.remove() }) 路书会有一些问题。