Google Map MarkerCluster 点聚合使用简介

谷歌地图点聚合功能的实现，及参数设置

1.使用 NPM 安装最新版本的 @googlemaps/markerclusterer 库。

npm install @googlemaps/markerclusterer

2.在应用中添加标记聚类器

import { MarkerClusterer } from "@googlemaps/markerclusterer";

const markerCluster = new MarkerClusterer({ map, markers });

3.使用情况

import { MarkerClusterer,defaultOnClusterClickHandler } from "@googlemaps/markerclusterer";

let markerClusterer = null;
function initMap() {

//初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});

const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

// 创建一个设置markers方法
const setMarkers = (setmarkers) => {return setmarkers.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
})};
// 创建渲染器,可修改文字样式及显示集群的图片

const renderer = {

render: ({ count, position }) =>

new google.maps.Marker({

label: { text: String(count), color: "white", fontSize: "16px"},

position,

icon: {

//设置集群的图片

url: this.renderImg,

scaledSize: new google.maps.Size(65, 32),

// 设置zIndex

zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,

}),

};

// 创建一个聚合方法
const setClusters = (setclusters) => {

return new MarkerClusterer({markers:setclusters,map:this.nodeMap,renderer,onClusterClick:onClusterClickHandler})

// 点击后集群底下的Markers
clusterMarkers = []

// 点击聚合的点，获取集群底下的Markers

const onClusterClickHandler = (event,cluster,map)=>{

clusterMarkers = cluster.markers.map((item, index, arr) => {

return item

});

defaultOnClusterClickHandler(event,cluster,map)

}

const markers = setMarkers(locations);

markerClusterer = setClusters(markers);

}

const locations = [

  { lat: -31.56391, lng: 147.154312 },{ lat: -33.718234, lng: 150.363181 },{ lat: -33.727111, lng: 150.371124 },{ lat: -33.848588, lng: 151.209834 },{ lat: -33.851702, lng: 151.216968 },{ lat: -34.671264, lng: 150.863657 },{ lat: -35.304724, lng: 148.662905 },{ lat: -36.817685, lng: 175.699196 },{ lat: -36.828611, lng: 175.790222 },{ lat: -37.75, lng: 145.116667 },{ lat: -37.759859, lng: 145.128708 },{ lat: -37.765015, lng: 145.133858 },{ lat: -37.770104, lng: 145.143299 },{ lat: -37.7737, lng: 145.145187 },{ lat: -37.774785, lng: 145.137978 },{ lat: -37.819616, lng: 144.968119 },{ lat: -38.330766, lng: 144.695692 },{ lat: -39.927193, lng: 175.053218 },{ lat: -41.330162, lng: 174.865694 },{ lat: -42.734358, lng: 147.439506 },{ lat: -42.734358, lng: 147.501315 },{ lat: -42.735258, lng: 147.438 },{ lat: -43.999792, lng: 170.463352 },
];