1. Introduce Baidu Map API

<script type="text/javascript" SRC ="//api.map.baidu.com/api?v=2.0&ak= your key "></script> <script type="text/javascript" SRC = "/ / api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js" > < / script > < script Type = "text/javascript" SRC = "/ / api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js" > < / script >Copy the code

2. Simple use (baidu example directly posted here)

Var map = new map.map ("allmap"); Map. CenterAndZoom (new BMap. Point (116.404, 39.915), 5); 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)); } // Create a marker array and call the markerClusterer class. var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers}); </script>Copy the code

3, custom point aggregation style

Dot aggregation is divided into five levels from small to large. Each level uses pictures as the background, so the corresponding data can be displayed normally

Var polymerizationStyles = [{url: 'imgs/m0.png',// image path size: new map. size (53, 52),// size textColor: Size: new MAP. size (56, 55), textColor: '#FFFFFF'}, {url: 'imgs/m1.png', size: new map. size (56, 55), textColor: '#FFFFFF'}, {url: 'imgs/m2.png', size: new BMap.Size(66, 65), textColor: '#FFFFFF' }, { url: 'imgs/m3.png', size: new BMap.Size(78, 77), textColor: '#FFFFFF' }, { url: 'imgs/m4.png', size: new BMap.Size(90, 89), textColor: '#FFFFFF' } ]; markerClusterer.setMinClusterSize(5); / / set up more than a few PM polymerization markerClusterer. The setStyles (polymerizationStyles); // Invoke styleCopy the code

4. Clear point aggregation

markerClusterer.clearMarkers();
Copy the code

5. Baidu point aggregation Api

Api.map.baidu.com/library/Mar…