1.引用
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申請的key&plugin=AMap.MouseTool,AMap.MarkerClusterer"></script>
2.使用
window.showAllPoint = function(allMarkers) { overlayGroups = []; //清空覆蓋物群組集合 markers = []; //清空點的集合 polyline = null; //清空線標記 polyGon = null; //清空面標記 for(var i = 0; i < allMarkers.length; i++) { var point = eval(allMarkers[i].lnglat); var radius = parseFloat(allMarkers[i].radius); //圓半徑 //如果是點標記 if(allMarkers[i].types == 1) { //創建點實例 marker = new AMap.Marker({ position: new AMap.LngLat(point[0], point[1]), title: allMarkers[i].name, map: map, icon: allMarkers[i].icon }); if(nowpage == 'gdiframe') marker.content = setInfoContent(allMarkers[i]); marker.on('click', markerClick); markers.push(marker); // 創建覆蓋物群組,並將 marker 傳給 OverlayGroup //overlayGroups = new AMap.OverlayGroup(markers); // 添加覆蓋物群組 //map.add(overlayGroups); } //如果是線標記 else if(allMarkers[i].types == 2) { //創建線實例 polyline = new AMap.Polyline({ path: point, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], geodesic: true }); polyline.setMap(map); if(nowpage == 'gdiframe') polyline.content = setInfoContent(allMarkers[i]); polyline.on('click', lineOrFaceClick); } //如果是面/矩形標記 else if(allMarkers[i].types == 3 || (allMarkers[i].types == 4)) { //創建面實例 polyGon = new AMap.Polygon({ path: point, map: map, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], fillColor: allMarkers[i].color || allMarkers[i].backgrse || "red", fillOpacity: 0.2, geodesic: true }) if(nowpage == 'gdiframe') polyGon.content = setInfoContent(allMarkers[i]); polyGon.on('click', lineOrFaceClick); } //如果是圓形標記 else if(allMarkers[i].types == 5) { //創建圓實例 polyGon = new AMap.Circle({ center: point, radius: radius, map: map, strokeColor: allMarkers[i].color || allMarkers[i].backgrse || "red", strokeOpacity: 1, strokeWeight: 2, strokeStyle: 'solid', strokeDasharray: [10, 5], fillColor: allMarkers[i].color || allMarkers[i].backgrse || "red", fillOpacity: 0.2, geodesic: true }) if(nowpage == 'gdiframe') polyGon.content = setInfoContent(allMarkers[i]); polyGon.on('click', lineOrFaceClick); } } cluster = new AMap.MarkerClusterer(map, markers, {gridSize: 80});//點聚合
// 獲取地圖的縮放級別,如果級別已經是最高,那么點擊后,顯示聚合點內的點信息
cluster.on('click',function(e,markers){
if(map.getZoom() == 18){
var itemsContent = "";
e.markers.forEach(function (item, index) {
itemsContent += item.content;
// console.log(itemsContent);
});
e.markers.forEach(function (item, index) {
infoWindow.setContent(itemsContent);
infoWindow.open(map, item.getPosition());
});
}
})
map.setFitView(); }