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
    评论
Vue中使用高德地图聚合点功能,首先需要安装并引入高德地图的JavaScript API。 1. 在`index.html`文件中,添加如下代码引入高德地图的API: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_api_key"></script> ``` 其中,`your_api_key`是你在高德地图开放平台申请的API Key。 2. 在Vue组件中,首先在`mounted`生命周期钩子中初始化地图,并创建一个地图实例: ```javascript mounted() { // 初始化地图 AMap.initAMapApiLoader({ key: 'your_api_key', plugin: ['AMap.MarkerClusterer'] }); // 创建地图实例 this.map = new AMap.Map('mapContainer', { center: [lng, lat], // 地图中心点经纬度 zoom: 13 // 地图缩放级别 }); } ``` 3. 在数据加载完成后,将需要聚合的点数据添加到地图上: ```javascript addMarkers() { this.points.forEach(point => { let marker = new AMap.Marker({ position: [point.lng, point.lat] // 标记点位置经纬度 }); this.map.add(marker); }); } ``` 其中,`this.points`是包含标记点经纬度的数组。 4. 最后,启用聚合点功能,将添加的标记点进行聚合: ```javascript clusterMarkers() { let cluster = new AMap.MarkerClusterer(this.map, this.map.getAllOverlays(), { gridSize: 80, // 聚合点的像素大小 renderCluserMarker(cluster) { let count = cluster.getMarkers().length; let div = document.createElement('div'); div.className = 'cluster-marker'; div.innerHTML = count; return new AMap.Icon({ size: new AMap.Size(40, 40), image: 'cluster.png', imageSize: new AMap.Size(40, 40), // 自定义聚合点的样式和内容 div: div }); } }); } ``` 通过`AMap.MarkerClusterer`类创建一个聚合器对象,将地图实例、添加的标记点和聚合选项传入。 以上就是在Vue中使用高德地图聚合点功能的基本步骤。根据实际需求,可以进一步添加交互、自定义样式等功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值