vue 高德地图打点，聚合点

1.index.html的body中引入高德地图密匙–加载顺序不要出错咯

2.在vue组件中使用具体代码

a.方法一

b.方法二
安装：npm install @amap/amap-jsapi-loader

设置中心点
map.setCenter([经度, 纬度]);
想要平滑过渡到中心点
map.panTo([经度, 纬度]);
map.setZoom(12)
map.setCenter([经度，纬度])
map.panTo([经度，纬度])
map.setZoomAndCenter(层级，[经度，纬度])

3.聚合点

a.// 加载高德地图 JS API
AMapLoader.load({
key: ‘your-amap-api-key’,
version: ‘2.0’,
plugins: [‘AMap.MarkerClusterer’]
}).then(() => {
// 创建地图和 MarkerClusterer 实例
const map = new AMap.Map(‘map-container’, {
zoom: 10,
center: [116.39, 39.9],
});
const markerClusterer = new AMap.MarkerClusterer(map, []);
});
b.// 创建一组 Marker 实例
const markers = [
new AMap.Marker({
position: [116.403981, 39.915599]
}),
new AMap.Marker({
position: [116.405285, 39.916528]
}),
new AMap.Marker({
position: [116.401394, 39.91855]
}),
// …
];

// 将 Marker 实例添加到 MarkerClusterer 中
markerClusterer.setMarkers(markers);
c.设置聚合点style样式
const markerClusterer = new AMap.MarkerClusterer(map, [], {
styles: [{
url: ‘https://a.amap.com/jsapi_demos/static/images/marker.png’,
size: new AMap.Size(64, 64),
offset: new AMap.Pixel(-32, -32)
}, {
url: ‘https://a.amap.com/jsapi_demos/static/images/marker.png’,
size: new AMap.Size(64, 64),
offset: new AMap.Pixel(-32, -32)
}, {
url: ‘https://a.amap.com/jsapi_demos/static/images/marker.png’,
size: new AMap.Size(64, 64),
offset: new AMap.Pixel(-32, -32)
}]
});