create-react-app中Google Map API的InfoWindow多余小框问题解决方法

这个问题是使用@react-google-maps/api开发时的常见渲染异常，来源有两个：

1. 你给InfoWindow单独传入了position属性，没有将其和触发弹窗的Marker做锚点绑定，组件初始化时会先渲染一个无内容的默认InfoWindow空壳，等自定义内容加载完成后才渲染正常尺寸的弹窗，最终出现两个类名完全相同的窗口。
2. 你给列表渲染的Marker设置的key是uuidv4()，每次组件重渲染都会生成全新的key值，导致所有Marker被重复销毁、重建，反复触发InfoWindow初始化流程，会放大这个重复渲染的问题。

• 首先替换Marker的key值，不要使用每次渲染都会变化的随机值，改用地点数据里的固定唯一字段（比如地点ID、经纬度组合），避免无意义的组件重渲染：

<Marker
  // 如果你数据里有专属id，用location.id效果更好
  key={`${location.lat}-${location.lng}`}
  icon={location.icon}
  position={{ lat: location.lat, lng: location.lng }}
  onClick={() => {
    setSelected(location);
  }}
/>

• 移除InfoWindow上独立设置的position属性，将InfoWindow作为对应选中状态Marker的子元素渲染，让组件自动完成锚点绑定，从根源避免空壳生成。修改后的核心代码如下：

return (
  <div style={{ display: "flex" }}>
    <GoogleMap
      zoom={12}
      center={center}
      mapContainerClassName="map-container"
    >
      {array.map((location) => (
        <Marker
          key={`${location.lat}-${location.lng}`}
          icon={location.icon}
          position={{ lat: location.lat, lng: location.lng }}
          onClick={() => {
            setSelected(location);
          }}
        >
          {/* 仅当前Marker被选中时，在Marker内部渲染对应的InfoWindow */}
          {selected?.lat === location.lat && selected?.lng === location.lng && (
            <InfoWindow
              onCloseClick={() => setSelected(null)}
            >
              <div>
                <h1>{selected.title}</h1>
                <p>{selected.description}</p>
                <FaHeart />
                <img src={selected.image} alt="" />
              </div>
            </InfoWindow>
          )}
        </Marker>
      ))}
    </GoogleMap>
    <p>map</p>
  </div>
);

• 兜底兼容方案：如果调整结构后仍有极端场景出现空壳，可以加一段全局CSS直接隐藏无内容的InfoWindow空壳：

/* 隐藏初始化阶段生成的无内容InfoWindow空壳 */
.gm-style .gm-style-iw-c:empty {
  display: none !important;
}

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