使用@react-google-maps/api的MarkerClustererF后标记消失问题

1. 确认是否安装了依赖库 #

MarkerClustererF组件依赖markerclusterer.js第三方库，未安装的话添加clusterer属性后会直接失效，导致标记和聚类都无法显示。执行命令安装：

npm install markerclusterer.js
# 或 yarn
yarn add markerclusterer.js

2. 检查版本兼容性 #

@react-google-maps/api和markerclusterer.js存在版本匹配要求，比如@react-google-maps/api@2.x需搭配markerclusterer.js@1.x。版本不兼容会引发渲染异常，可查看package.json中的版本号，调整为兼容组合。

3. 确保地图容器有明确尺寸 #

<GoogleMap>所在的容器必须设置明确的宽高样式（例如width: 100%; height: 600px;）。聚类组件对容器尺寸的要求比普通标记更严格，无明确尺寸可能导致组件无法渲染。

4. 调试渲染逻辑与key值 #

• 在render prop中打印cluster对象，确认其是否正常生成：

  <MarkerClustererF>
      {(cluster) => {
        console.log(cluster); // 查看控制台是否有cluster对象输出
        return (
          <>
            {deliveryPendingPositions.map((position) => (
              <MarkerF 
                position={position} 
                key={`${position.lat}-${position.lng}`} 
                clusterer={cluster} 
              />
            ))}
          </>
        )
      }}
  </MarkerClustererF>
  

• 将key从index换成经纬度组合值，避免列表更新时因index重复导致的组件渲染异常（虽不是直接原因，但能排除潜在问题）。

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