百度地圖聚合點new BMapLib.MarkerClusterer（）用法及map.clearOverlays()不能清除聚合點問題
阿新 • • 發佈：2019-01-23
時候是我們需要在地圖上新增覆蓋物，但如果資料太多可能出現這種情況
這種看起來總覺得不舒服（密集恐懼症）
所以可以換成用聚合點
一下子清爽了很多，聚合點放大後還是可以顯示普通點。
用法程式碼
<!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)