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

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

下图左侧：显示有2个点。

 放大之后：左侧只有一个点。

 

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

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

问题分析与解决方案

核心原因主要有两类： 

1. 两个 Marker 的坐标完全相同 / 极近距离，放大后视觉上重叠成一个点；
2. 其中一个 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);
      });

      // 监听散点事件，确认散点的Marker
      this.markerCluster.on('disperse', (e) => {
        console.log('散点的Marker数量:', e.markers.length);
        e.markers.forEach((marker, index) => {
          console.log(`散点Marker${index + 1} 坐标:`, marker.getPosition());
        });
      });
    }
  }
};
</script>

 

关键修复步骤说明

1. 检查坐标是否重复：

    

   打开浏览器控制台，查看打印的 Marker 坐标，如果两个坐标完全相同，放大后就会重叠成一个点。可以给重复坐标增加微小偏移（比如0.0001），示例：
    // 给重复坐标加微小偏移

   this.points = [
     { lng: 116.397428, lat: 39.90923 },
     { lng: 116.397428 + 0.0001, lat: 39.90923 + 0.0001 },
   ]; 

    
2. 验证 Marker 是否正确创建：

    

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

    

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

    

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

总结

1. 核心问题是Marker 坐标重复 / 极近导致视觉重叠，或 Marker 实例未正确创建；
2. 通过控制台打印 Marker 坐标和数量，可快速定位问题；
3. 对重复坐标增加微小偏移，或检查 Marker 创建逻辑，即可解决 “聚合数 2 但放大只有 1 个点” 的问题。