React Google Maps MarkerClusterer动态重复标记渲染超限问题

报错原因 #

1. 重复标记引发循环更新：当新旧数据集包含重复GPS点时，未去重的标记会被重复添加到MarkerClusterer中。Clusterer处理重复Marker实例时会触发内部状态更新，进而导致React组件重渲染；重渲染又会重新执行标记添加逻辑，形成「更新-重渲染-再更新」的循环，最终触发Maximum update depth exceeded错误。
2. 依赖数组不稳定：如果useEffect的依赖项包含每次渲染都会重新创建的数组/对象（比如未用useMemo缓存的标记列表），会导致useEffect反复执行清理和添加操作，加剧循环更新。
3. 未复用Marker实例：重复创建相同坐标的Marker实例，会让MarkerClusterer频繁触发聚类计算，间接引发React状态更新循环。

适配场景的MarkerClusterer实现示例 #

以下实现包含客户端去重、减少不必要重渲染、稳定的Clusterer实例管理三个核心要点：

import { useState, useEffect, useMemo, useRef } from 'react';
import { GoogleMap, useMap } from '@vis.gl/react-google-maps';
import { MarkerClusterer } from '@googlemaps/markerclusterer';

// 基于经纬度去重标记
const dedupeMarkers = (markers) => {
  const seen = new Map();
  return markers.filter(marker => {
    const uniqueKey = `${marker.lat}-${marker.lng}`;
    if (seen.has(uniqueKey)) return false;
    seen.set(uniqueKey, true);
    return true;
  });
};

const NearbyMap = ({ currentLocation, datasets }) => {
  const [activeDataset, setActiveDataset] = useState('dataset1');
  const map = useMap();
  const clustererRef = useRef(null);
  const markersRef = useRef([]);

  // 缓存去重后的标记数据，仅当数据集切换时重新计算
  const dedupedMarkers = useMemo(() => {
    const rawData = datasets[activeDataset];
    return dedupeMarkers(rawData);
  }, [activeDataset, datasets]);

  useEffect(() => {
    if (!map) return;

    // 初始化Clusterer实例
    if (!clustererRef.current) {
      clustererRef.current = new MarkerClusterer({ map });
    }

    // 清理旧标记
    if (markersRef.current.length > 0) {
      clustererRef.current.removeMarkers(markersRef.current);
      markersRef.current = [];
    }

    // 创建新标记并加入聚类
    const newMarkers = dedupedMarkers.map(data => {
      return new google.maps.Marker({
        position: { lat: data.lat, lng: data.lng },
        title: data.title || '附近点位'
      });
    });

    clustererRef.current.addMarkers(newMarkers);
    markersRef.current = newMarkers;

    // 组件卸载时清理资源
    return () => {
      if (clustererRef.current) {
        clustererRef.current.clearMarkers();
        clustererRef.current = null;
      }
    };
  }, [map, dedupedMarkers]);

  return (
    <div>
      <div className="dataset-switcher">
        <button onClick={() => setActiveDataset('dataset1')}>数据集1</button>
        <button onClick={() => setActiveDataset('dataset3')}>数据集3</button>
      </div>
      <GoogleMap
        mapId="YOUR_MAP_ID"
        center={currentLocation}
        zoom={12}
        style={{ width: '100%', height: '600px' }}
      />
    </div>
  );
};

export default NearbyMap;

关键优化点说明 #

• 客户端去重：通过dedupeMarkers函数基于经纬度生成唯一标识，过滤重复标记，从根源避免重复Marker进入Clusterer。
• 缓存去重结果：用useMemo缓存dedupedMarkers，仅当活跃数据集或原始数据变化时重新计算，减少不必要的重渲染触发。
• 稳定的实例引用：用useRef保存Clusterer和标记列表，避免每次渲染重新创建实例，确保清理逻辑能准确移除旧标记。
• 精准的依赖控制：useEffect仅依赖map和dedupedMarkers，确保只有地图实例或去重后的标记数据变化时，才执行更新逻辑。

额外优化建议 #

• 标记实例复用：如果标记数据仅部分变化，可以对比新旧标记列表，只增删变化的标记，而非全量替换，进一步降低Clusterer的计算开销。
• 配合React Marker组件：若偏好使用@vis.gl/react-google-maps的<Marker>组件，可通过getMarkerRef获取Marker实例后传入Clusterer，同时给每个<Marker>设置唯一key（比如经纬度拼接字符串）。

内容的提问来源于stack exchange，提问作者Sebastian Meckovski