1. 程式人生 > >百度地圖聚合點new BMapLib.MarkerClusterer()用法及map.clearOverlays()不能清除聚合點問題

百度地圖聚合點new BMapLib.MarkerClusterer()用法及map.clearOverlays()不能清除聚合點問題

時候是我們需要在地圖上新增覆蓋物,但如果資料太多可能出現這種情況

這種看起來總覺得不舒服(密集恐懼症)

所以可以換成用聚合點

一下子清爽了很多,聚合點放大後還是可以顯示普通點。

用法程式碼

<!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)