当前位置：首页 > news >正文

AMap.MarkerCluster 在Vue中显示数量为2，但是放大页面，看到只有一个点。

news 2026/5/12 21:36:33

下图左侧：

放大之后：

================================

在 Vue 项目中使用高德地图的AMap.MarkerCluster（点聚合）功能时，遇到了聚合显示数量为 2，但放大地图后却只看到一个标记点的问题，这通常是坐标重叠或 Marker 实例创建 / 添加异常导致的。

问题分析与解决方案

核心原因主要有两类：

两个 Marker 的坐标完全相同 / 极近距离，放大后视觉上重叠成一个点；
其中一个 Marker 未正确创建 / 添加到聚合器中（Vue 生命周期或实例管理问题）。

以下是完整的 Vue 示例代码，包含调试和修复逻辑：

vue
 
<template><div id="map-container" ></div>
</template><script>
export default {name: 'MapClusterDemo',data() {return {map: null,markerCluster: null,// 模拟点位数据（注意：如果两个坐标完全一样，就会出现你遇到的问题）points: [{ lng: 116.397428, lat: 39.90923 }, // 点位1{ lng: 116.397428, lat: 39.90923 }, // 点位2（和点位1坐标相同，放大后重叠）// 可以改成不同坐标测试：{ lng: 116.398428, lat: 39.90923 }]};},mounted() {this.initMap();},beforeUnmount() {// 清理地图实例，避免内存泄漏if (this.markerCluster) {this.markerCluster.clearMarkers();this.markerCluster = null;}if (this.map) {this.map.destroy();this.map = null;}},methods: {async initMap() {// 确保高德地图SDK已加载（如果是异步加载，需先等待）if (!window.AMap) {console.error('高德地图SDK未加载');return;}// 初始化地图this.map = new window.AMap.Map('map-container', {zoom: 12,center: [116.397428, 39.90923]});// 创建Marker数组const markers = [];this.points.forEach((point, index) => {const marker = new window.AMap.Marker({position: [point.lng, point.lat],title: `点位${index + 1}` // 给每个Marker加标题，方便调试});markers.push(marker);// 调试：打印每个Marker的坐标，确认是否正确创建console.log(`Marker${index + 1} 坐标:`, marker.getPosition());});// 调试：确认Marker数组长度（应该等于2）console.log('Marker总数:', markers.length);// 初始化聚合器this.markerCluster = new window.AMap.MarkerCluster(this.map, markers, {gridSize: 80, // 聚合网格大小（像素），可根据需求调整minClusterSize: 2, // 最小聚合数量（默认2）renderClusterMarker: (context) => {// 自定义聚合点样式（可选）return new window.AMap.Marker({position: context.center,content: `<div >${context.count}</div>`,offset: new window.AMap.Pixel(-15, -15)});}});// 监听聚合事件，确认聚合的Marker数量this.markerCluster.on('cluster', (e) => {console.log('聚合的Marker数量:', e.markers.length);});// 监听散点事件，确认散点的Markerthis.markerCluster.on('disperse', (e) => {console.log('散点的Marker数量:', e.markers.length);e.markers.forEach((marker, index) => {console.log(`散点Marker${index + 1} 坐标:`, marker.getPosition());});});}}
};
</script>

关键修复步骤说明

检查坐标是否重复：

打开浏览器控制台，查看打印的 Marker 坐标，如果两个坐标完全相同，放大后就会重叠成一个点。可以给重复坐标增加微小偏移（比如0.0001），示例：
```
// 给重复坐标加微小偏移
this.points = [{ lng: 116.397428, lat: 39.90923 },{ lng: 116.397428 + 0.0001, lat: 39.90923 + 0.0001 },
]; 
```
验证 Marker 是否正确创建：

控制台打印的Marker总数必须是 2，如果是 1，说明其中一个 Marker 未创建成功（比如坐标格式错误、SDK 未加载完成）。
调整聚合器配置：

gridSize（聚合网格大小）过小会导致近距离点被聚合，可适当调大（如 80-100）；minClusterSize设为 2 确保至少 2 个点才聚合。
Vue 生命周期管理：

确保在mounted中初始化地图（DOM 已渲染），在beforeUnmount中清理实例，避免 SDK 实例异常。