百度地圖修改點匯聚樣式（JS地圖）
阿新 • • 發佈：2019-02-08
javascript版百度地圖進行點匯聚並更改樣式，引入百度開源類庫TextIconOverlay_min.js和MarkerClusterer_min.js，使用(map, options)進行點聚合：
BMapLib.MarkerClusterer(map, options) MarkerClusterer- 引數:
- {Map} map
- 地圖的一個例項。
- {Json Object} options
- 可選引數，可選項包括：
markers {Array} 要聚合的標記陣列
girdSize {Number} 聚合計算時網格的畫素大小，預設60
maxZoom {Number} 最大的聚合級別，大於該級別就不進行相應的聚合
minClusterSize {Number} 最小的聚合數量，小於該數量的不能成為一個聚合，預設為2
isAverangeCenter {Boolean} 聚合點的落腳位置是否是所有聚合在內點的平均值，預設為否，落腳在聚合內的第一個點
styles {Array} 自定義聚合後的圖示風格，請參考TextIconOverlay類
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script> <title>點聚合</title> </head> <body> div{ background-size:100% 100% } <div id="allmap"></div> <p>縮放地圖，檢視點聚合效果</p> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 4); map.enableScrollWheelZoom(); var MAX = 10; var markers = []; var pt = null; var i = 0; for (; i < MAX; i++) { pt = new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21); markers.push(new BMap.Marker(pt)); } var _styles =[{url:"http://******/wx/image/currentday.png",size: new BMap.Size(40, 40)}] //最簡單的用法，生成一個marker陣列，然後呼叫markerClusterer類即可。 var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers,styles:_styles}); </script>