从React Google Maps API中的Circle组件获取新的位置和半径

Question

我使用React Google Maps API包来创建一个地图组件，其中包含一个圆圈组件。下面是来自npm注册表https://www.npmjs.com/package/@react-google-maps/api的包。

我在Google Map组件中使用Circle组件。我将Circle设置为可拖动和可调整大小。

我需要为每个拖动操作获取center的新值，并为每个调整大小操作获取radius的新值。在这个https://react-google-maps-api-docs.netlify.app/#circle文档中，onCenterChanged和onRadiusChanged的类型为void。

所以我的问题是我怎么能得到center的新值为每一个拖动操作，并获得radius的新值为每一个调整大小的行动使用这个库?

或者有任何解决方案使用原始的谷歌地图库?

下面是代码:https://codesandbox.io/s/circle-react-google-maps-api-lo9f6

Answer 1

在再次阅读文档和大量尝试后，我找到了从圆的新位置/大小获得位置和半径的新值的解决方案。

我添加了onLoadprop并使用它设置圆圈。然后打印circle状态值，检查是否有lat、lng、radius值

我找到了这些值，下面是代码。

const [ circle, setCircle ] = useState(null)
<Circle
center={mapCenter}
radius={radius}
options={circleOptions}
onLoad={(circle) => setCircle(circle)}
onUnmount={(circle) => setCircle(null)}
onCenterChanged={() => circle && setCircleCenter({ lat: circle['center'].lat(), lng: circle['center'].lng() })}
onRadiusChanged={() => circle && setRadius(parseInt(circle['radius']))}
/>