百度地图api清除指定覆盖物

最新推荐文章于 2023-12-15 10:12:17 发布

weixin_34254823

最新推荐文章于 2023-12-15 10:12:17 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2395167/blog/1543523

本文介绍了如何在百度地图API中清除指定的覆盖物。通过map.removeOverlay()方法可以移除单个覆盖物，而map.clearOverlays()则用于移除所有覆盖物。在实现特定需求时，如点击人员只显示其管理区域并清除其他区域，可以结合disableMassClear()和enableMassClear()方法。详细步骤和代码示例可供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1、首先在官网api demo有如下例子：（地址：http://lbsyun.baidu.com/jsdemo.htm?a#c1_17）

// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	map.disableDoubleClickZoom(true);
		
	// 编写自定义函数,创建标注
	function addMarker(point,label){
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		marker.setLabel(label);
	}
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 10; i++) {
		var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
		var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
		addMarker(point,label);
	}
	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;
			}
		}
	}

我们会发现 map.getOverlays() 函数会返回页面覆盖物的个数+1 个；

言归正传：在百度api里，清除覆盖物有两个方法：map.removeOverlay()或者 map.clearOverlays()。而 clearOverlays()方法一次移除所有的覆盖物，removeOverlay()一次移除一个指定覆盖物。

现在我的需求是如图：

点击左边的人员后，右边对应的人员显示自己管理的圆圈范围。同时清除其他人员的圆圈区域（也就是说地图只显示当前管理员的管理区域），所以每次点击需要清除已有的圆圈。

api又提供了另外2个配套的方法：disableMassClear() 和 enableMassClear();

disableMassClear()：官网文档解释 禁止覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)

enableMassClear()：官网文档解释 允许覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)

实现该功能的步骤如下：

第一步：在添加覆盖的时候对不需要进行移除操作的覆盖设置disableMassClear();

   marker.setLabel(label);  
   this.map.addOverlay(marker);//增加点
   marker.disableMassClear(); //mark不被清除

第二步：清除所要清除的覆盖物，这里需要清除所有的Polyline而不清除marker，现在可以直接使用
   
    var circle = new BMap.Circle(poi,dis,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 
     0.3,strokeOpacity: 0.3});
    this.map.clearOverlays();
    this.map.addOverlay(circle);

只需2步，功能就完成了

如果现在需要对marker进行移除操作时，可以使用enableMassClear()方法来取消禁止清除；

var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length; i++) {
     allOverlay[i].enableMassClear();
     return false;
};

参考：http://blog.youkuaiyun.com/frees_zhu/article/details/73743785

全部代码：

window.visualMonitor ={
    path:$("#path").val(),
    map:new BMap.Map("bdMap"),
    initMapBdMap:function(){//初始地图高度
        var mapHeight = $(window).height() - 85;
        $("#bdMap").css({"height":mapHeight});
        $("#treeContainer").niceScroll({
            cursoropacitymin: 0, 
            cursoropacitymax: 1, 
            zindex:99,
            cursorwidth: "5px",
            cursorborder: "none",
            cursorborderradius