使用@react-google-maps/api 拖动后如何更新和获取 Circle 新位置？

Question

我在地图上画了一个圆圈，我想知道如何更新并在拖动圆圈后获取新的经纬度位置，这是我目前的代码：

<GoogleMap
  onLoad={loadHandler}
  center={center}
  zoom={zoom}
  mapContainerStyle={{
    height: "70vh",
    width: "100%"
  }}
>
  <Circle
    ref={circleRef}
    center={center}
    radius={1000}
    options={{ fillColor: "#EE80AE33", strokeColor: "#EE80AE66" }}
    draggable={true}
    // onDragStart={}
    onDragEnd={() => console.log(circleRef.current.getCenter())}
  />
</GoogleMap>

我尝试了onDragEnd={() => console.log(circleRef.current.getCenter())}，但它不起作用，因为我得到了原始中心位置

查看文档后here

以及代码示例here

Answer 1

我认为中心没有更新，因为center 是在 state 中定义的；该值将始终固定，因为它从未手动更改。拖动时可能会绘制圆形，但不会在内部更新中心。

onDragEnd 传递一个地图事件，您可以从中解构 latLng 对象，其中包含一些应该返回新中心的有用函数。

onDragEnd={(event) => console.log(event.latLng.toString())}