使用@react-google-maps/api时Marker与OverlayView无法稳定显示

以下是针对本地开发环境中组件显示不稳定的具体解决办法：

• 确保地图实例就绪后再渲染子组件
  本地CRA的资源加载速度往往慢于在线沙箱环境，提前渲染Marker和OverlayView时，地图实例可能还未完成初始化。可以通过onLoad回调控制子组件的渲染时机：

  const [mapReady, setMapReady] = useState(false);
  
  const handleMapLoad = (mapInstance) => {
    setMapReady(true);
    // 可按需将mapInstance存入状态备用
  };
  
  return (
    <GoogleMap
      onLoad={handleMapLoad}
      center={{ lat: 48, lng: 11 }}
      zoom={10}
    >
      {mapReady && (
        <>
          <Marker position={{ lat: 48, lng: 11 }} />
          <OverlayView
            position={{ lat: 48, lng: 11 }}
            mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
          >
            <div style={{ background: "#fff", padding: "8px", border: "1px solid #ccc" }}>自定义组件</div>
          </OverlayView>
        </>
      )}
    </GoogleMap>
  );
  

• 给OverlayView的自定义元素添加明确定位
  未设置定位的HTML组件可能因布局偏移被隐藏，需配合偏移调整确保组件对齐目标坐标：

  <OverlayView
    position={{ lat: 48, lng: 11 }}
    mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    getPixelPositionOffset={(offset) => new window.google.maps.Size(-offset.width / 2, -offset.height)}
  >
    <div style={{ 
      position: "absolute", 
      transform: "translate(-50%, -100%)",
      background: "#fff",
      padding: "8px"
    }}>
      自定义组件
    </div>
  </OverlayView>
  

• 临时禁用Fast Refresh排查热重载冲突
  CRA的热重载机制可能干扰地图组件的生命周期，启动项目时执行以下命令禁用：

  DISABLE_FAST_REFRESH=true npm start
  

  若禁用后显示正常，可在package.json中添加该配置作为开发临时方案，或调整热重载排除规则。

• 使用官方钩子管理API脚本加载
  避免直接在index.html中引入谷歌地图脚本，改用useLoadScript钩子确保脚本加载完成后再渲染地图：

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "你的API密钥",
    libraries: [] // 按需添加所需库，如places
  });
  
  if (!isLoaded) return <div>地图加载中...</div>;
  
  return <GoogleMap {...地图配置}>{/* 子组件 */}</GoogleMap>;
  

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