在使用 `@react-google-maps/api` 时，`
直接将
✅ 正确做法是：利用 onLoad 回调或 useEffect + ref 显式监听地图就绪状态，并条件性渲染叠加层：
import React, { useRef, useState, useEffect } from 'react';
import { GoogleMap, LoadScript, Circle } from '@react-google-maps/api';
const EndpointMap = () => {
const mapRef = useRef(null);
const [isMapLoaded, setIsMapLoaded] = useState(false);
const apiKey = 'your-api-key';
return (
{
mapRef.current = map;
setIsMapLoaded(true); // ✅ 地图加载完成，触发状态更新
}}
>
{/* ✅ 仅在地图就绪后渲染 Circle */}
{isMapLoaded && (
);
};
export default EndpointMap; ⚠️ 注意事项：
- 避免 setTimeout 延迟 hack：答案中建议的 500ms 延迟虽偶现有效，但不可靠（网络波动、设备性能差异会导致失效），应优先使用 onLoad 这一官方支持的生命周期回调；
- ref 与 onLoad 需配合使用：onLoad 是唯一保证 map 实例已创建并可安全操作的时机，ref 则用于后续手动调用（如 panTo、fitBounds）；
- 确保 libraries 正确声明：Circle 不依赖 places 库，但若同时使用 StandaloneSearchBox，则需保留 ['places']；否则可精简为 []；
- 服务端渲染（SSR）兼容性：@react-google-maps/api 不支持 SSR，务必确保组件仅在客户端执行（如配合 dynamic + ssr: false 在 Next.js 中使用）。
总结：
