如何正确更新Google Maps中Circle组件的半径？

我尝试通过状态变量设置Google Maps中Circle组件的半径。当变量更新时，Circle的半径会增大，但旧的圆圈仍然显示，且该问题仅在首次修改半径时出现。

问题截图：

import React from "react";
import { GoogleMap, useJsApiLoader, Marker, Circle, StandaloneSearchBox } from "@react-google-maps/api";

const center = { lat: 40.41620, lng: -4.34140 }

const mapStyle = {
  width: '100%',
  height: '800px'
};

const containerStyle ={
  width:'100%',
  height:'100vh'
}


export default function App() {

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_KEY
  })

  const [map, setMap] = React.useState(null)
  const [radius, setRadius] = React.useState(500)

  const onLoad = React.useCallback(function callBack(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.zoom = 15
    setMap(map)
  })

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  })

  return isLoaded ?
    (
      <div style={containerStyle}>
        <div className="range setter">
          <p>半径（米）：{radius}</p>
          <input type="range" min={500} max={5000} step={50} value={radius} onChange={(e) => setRadius(parseInt(e.target.value))} />
        </div>
        <GoogleMap mapContainerStyle={mapStyle} center={center} zoom={10} onLoad={onLoad} onUnmount={onUnmount}>
          <Marker position={center} />
          <Circle center={center} radius={radius} />
        </GoogleMap>
      </div>

    ) : <></>
}

这个问题源于onLoad回调中直接修改map.zoom，导致Google Maps实例初始化时的状态变更与React状态更新冲突，首次修改半径时旧Circle实例未被正确清理。以下两种方法可修复：

方法一：移除手动设置zoom的代码 #

删除onLoad里的map.zoom = 15，直接在GoogleMap组件的zoom属性中设置初始值：

<GoogleMap mapContainerStyle={mapStyle} center={center} zoom={15} onLoad={onLoad} onUnmount={onUnmount}>

同时简化onLoad回调并添加空依赖数组，避免不必要重渲染：

const onLoad = React.useCallback(function callBack(map) {
  setMap(map)
}, [])

方法二：给Circle组件添加唯一key #

若需保留onLoad中的zoom设置，给Circle组件添加key属性，确保React正确识别组件更新：

<Circle key={`circle-${radius}`} center={center} radius={radius} />

每次radius变化时，React会重新创建Circle组件，替换旧实例。

另外注意原代码中<p>Radius in KM: {radius}</p>存在单位错误，radius的单位是米，建议改为<p>半径（米）：{radius}</p>避免误解。

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