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

Question

我正在使用 React Google 地图 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 的新值使用此库的操作？

或者有没有使用原始 google 地图库的解决方案？

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

Answer 1

再次阅读文档并进行大量尝试后，我找到了从圆的新 position/size 获取位置和半径的新值的解决方案。

我添加了 onLoad 属性并使用它设置了圆圈。然后我打印了 circle 状态值来检查是否有纬度、经度和半径值。

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

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']))}
/>

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

Get new location and radius from Circle component in React Google Maps API

javascript

google-maps

reactjs