vue3中，amap上的点聚合

可以使用AMap的MarkerClusterer插件来实现点聚合，具体实现方法可以参考以下代码：

// 引入AMap和MarkerClusterer插件
import AMap from 'AMap';
import MarkerClusterer from 'AMap.MarkerClusterer';

// 创建地图实例
const map = new AMap.Map('mapContainer', {
zoom: 10,
center: [116.39, 39.9]
});

// 创建MarkerClusterer实例
const markerClusterer = new MarkerClusterer(map, [], {
gridSize: 80,
maxZoom: 18,
zoomOnClick: true,
renderClusterMarker: function (context) {
// 自定义聚合点的样式
const count = context.count;
const size = Math.max(30, Math.min(count * 5, 80));
const style = `
position: relative;
width: ${size}px;
height: ${size}px;
border-radius: ${size / 2}px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 14px;
text-align: center;
line-height: ${size}px;
`;
return {
content: `<div style="${style}">${count}</div>`,
size: new AMap.Size(size, size)
};
}
});

// 添加Marker到MarkerClusterer
const markers = [
new AMap.Marker({ position: [116.39, 39.9] }),
new AMap.Marker({ position: [116.4, 39.9] }),
new AMap.Marker({ position: [116.41, 39.9] }),
new AMap.Marker({ position: [116.42, 39.9] }),
new AMap.Marker({ position: [116.43, 39.9] })
];
markerClusterer.addMarkers(markers);

// 调整地图视野以显示所有Marker
map.setFitView();