如何在React Google Maps中优雅修改/移除标记？

问题描述 #

使用React Google Maps开发地图时，初始标记绘制正常，但修改或移除标记时地图变为灰屏。尝试通过useEffect监听markers变化并重渲染地图无效，希望在该包内优雅解决，避免使用Google Maps原生API或refs。

代码示例 #

<Map
  key={`${mapState.center.lat}-${mapState.center.lng}-${mapState.zoom}`}
  defaultCenter={mapState.center}
  defaultZoom={mapState.zoom}
  gestureHandling="greedy"
  disableDefaultUI={true}
  mapId={process.env.NEXT_PUBLIC_GOOGLE_MAPS_MAP_ID!}
>
  {markers.map((marker, index) => (
    <CustomMarker
      key={index}
      marker={marker}
      onClick={() => setSelectedMarker(marker)}
    />
  ))}
</Map>

问题分析 #

1. 标记key使用index的风险：当标记数组发生增删、排序时，index作为key无法让React正确识别组件的更新，会导致旧组件实例被错误复用，引发渲染异常。
2. Map组件的key依赖不足：当前Map的key仅关联地图中心和缩放级别，标记变化不会触发Map的重渲染，若标记内部更新逻辑存在问题，会导致地图渲染异常。
3. CustomMarker可能存在不必要重渲染：如果CustomMarker不是纯组件，频繁的无意义重渲染可能干扰地图的正常渲染。

解决方案 #

1. 给标记使用唯一稳定的key

替换index为marker自身的唯一标识（如id字段），确保React能准确追踪标记的增删改：

{markers.map((marker) => (
  <CustomMarker
    key={marker.id} // 使用marker的唯一ID而非index
    marker={marker}
    onClick={() => setSelectedMarker(marker)}
  />
))}

2. 让Map组件感知标记变化

更新Map的key，加入标记集合的唯一标识，确保标记变化时Map能同步更新：

// 生成标记集合的唯一key（示例：拼接所有marker的id）
const markersKey = markers.map(m => m.id).join('-');

<Map
  key={`${mapState.center.lat}-${mapState.center.lng}-${mapState.zoom}-${markersKey}`}
  defaultCenter={mapState.center}
  defaultZoom={mapState.zoom}
  gestureHandling="greedy"
  disableDefaultUI={true}
  mapId={process.env.NEXT_PUBLIC_GOOGLE_MAPS_MAP_ID!}
>
  {/* 标记渲染逻辑 */}
</Map>

3. 优化CustomMarker组件

用React.memo包裹CustomMarker，避免不必要的重渲染：

const CustomMarker = React.memo(({ marker, onClick }) => {
  // 组件内部渲染逻辑，示例：
  return (
    <Marker
      position={{ lat: marker.lat, lng: marker.lng }}
      onClick={onClick}
    />
  );
});

4. 确保标记状态的不可变更新

修改标记数组时，必须返回新数组而非直接修改原数组，让React能检测到状态变化：

// 错误示例：直接修改原数组
// markers.splice(removeIndex, 1);
// setMarkers(markers);

// 正确示例：返回新数组
setMarkers(prevMarkers => prevMarkers.filter(m => m.id !== targetMarkerId));

5. 检查包版本

确保使用的@react-google-maps/api为最新版本，旧版本可能存在标记更新的已知bug。

内容的提问来源于stack exchange，提问作者Nicholas Mirabile