百度地图聚合点new BMapLib.MarkerClusterer（）用法及map.clearOverlays()不能清除聚合点问题

冷不防 2022-05-17 00:11 458阅读 0赞

时候是我们需要在地图上添加覆盖物，但如果数据太多可能出现这种情况

![70][]

这种看起来总觉得不舒服（密集恐惧症）

所以可以换成用聚合点

![70 1][]

一下子清爽了很多，聚合点放大后还是可以显示普通点。

**用法代码**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    		<link rel="stylesheet" href="<%=request.getContextPath()%>/pages/jsp/mapset/heatmap/css/DrawingManager_min.css" />
    		<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    		<script type="text/javascript" src="<%=request.getContextPath()%>/pages/jsp/area/js/baidu/MarkerTool_min.js"></script>
    		<script type="text/javascript" src="<%=request.getContextPath()%>/pages/jsp/mapset/heatmap/heatmap_js/DrawingManager_min.js"></script>
    		<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    		<script src="<%=request.getContextPath()%>/pages/js/distanceTool.js" type="text/javascript" charset="utf-8"></script>
    		
    		<script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    		<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    	</head>
    	<body>
    		<div id="map" style="width:800px;height:500px;"></div>
    		<script>
    			var map = new BMap.Map('map');
    			var poi = new BMap.Point(112.53, 37.87);
    			map.enableScrollWheelZoom();
    			map.centerAndZoom(poi, 12);
    			//添加比例尺
    			map.addControl(new BMap.ScaleControl());
    			//初始化打点数据
    			var markers=[];
    			//初始化点聚合
    			var markerClusterer=new BMapLib.MarkerClusterer(map, {markers:markers});
    			
    			
    			//每次拖动屏幕，重新获取聚合点
    			map.addEventListener("dragend",function(){
    				var zoom=map.getZoom();
    				console.log(zoom)
    				if(zoom>17){
    					//获取屏幕边界及四个点坐标
    					var bound=map.getBounds();
    					var minLat=bound.Xd;
    					var maxLat=bound.Vd;
    					var minLng=bound.Le;
    					var maxLng=bound.He;
    					var def=''+minLng+','+maxLat+','+maxLng+','+minLat+','+maxLng+','+maxLat+','+minLng+','+maxLat+','+minLng+','+maxLat+'';
    					//此处用的后台接口，用于获取打点数据
    					getStationsInPolygon(def,maxLng, minLng, maxLat, minLat)
    					
    				}
    			});
    			
    			function getStationsInPolygon(areaDef, maxLng, minLng, maxLat, minLat) {
    				$.ajax({
    					url : '/floating/resource/selectDataPromote', // 请求连接
    					type : "post", // 请求类型
    					data : {
    						"interfaceName" : "getStationsInPolygonNew",
    						"areaDef" : areaDef,
    						"maxLng" : maxLng,
    						"minLng" : minLng,
    						"maxLat" : maxLat,
    						"minLat" : minLat
    					}, // post时请求体
    					dataType : 'json', // 返回请求的类型，有text/json两种
    					async : false, // 是否异步
    					success : function(data) {
    						if (data.success) {
    							//清除以前的点
    							markerClusterer.clearMarkers(markers);
    							//清除数组的数据
    							markers=[];
    							console.log(markers)
    							//添加数据
    							for (var i=0; i<data.data.length; i++) {
    								var point = new BMap.Point(data.data[i].lacLong, data.data[i].lacLat);    
    								var marker = new BMap.Marker(point);        // 创建标注    
    								markers.push(marker)
    							}
    							//添加聚合点
    							markerClusterer.addMarkers(markers)
    							console.log(markerClusterer)
    						} else {
    							alert("获取基站信息失败！");
    						}
    					} // 请求成功回调函数
    				});
    			}
    			
    			//一键清除
    			function clearAll() {
    				//清除覆盖物
    				map.clearOverlays();
    				//清除聚合点
    				markerClusterer.clearMarkers(markers);
    			}
    			
    			
    		</script>
    	</body>
    </html>

总之就是初始化 var markerClusterer=new BMapLib.MarkerClusterer(map, \{markers:markers\});

每次获取数据后清空markers数组再添加新数据，可以先清空原覆盖物 markerClusterer.clearMarkers(markers),

或者markerClusterer.clearMarkers()，markers不需要写，因为初始化时就已经绑定数组了;

添加聚合点覆盖物  markerClusterer.addMarkers(markers)

就是这么简单。

**注意：**

清空覆盖物不能单纯使用  map.clearOverlays()，这样只能清除普通的点。而对于聚合点而言，只是暂时消失，鼠标一拖动或者放大缩小就又出现了。

要用 markerClusterer.clearMarkers()  的方法才能真正清除

注意var markerClusterer=new BMapLib.MarkerClusterer(map, \{markers:markers\}) 只需要在全局中初始化一次

以后每次改变聚合点图时只需要改变数组，清除聚合点，再重新画点就可以 markerClusterer.addMarkers(markers)

[70]: /images/20220517/c8bdc454b37541259dec1a68cf60b853.png
[70 1]: /images/20220517/795a02bbc4de4160a555d89da68ac50b.png