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)
}]
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值