Javascript onCenterChange回调返回未定义的@react google maps/api

我一直在使用一个名为

@react google maps/api

的库，我希望将地图中心存储为react state，并且我希望用户能够在标记始终位于地图中心时拖动地图（uber style位置选择）

问题是，当我调用组件的

onCenterChange

时，它返回未定义的值

以及在存储

map

实例（在

onLoad

回调上接收）后作为react状态。map实例每次都返回完全相同的中心（我猜状态保存是静态的）

{
if（！map）setMap（m）；
}}
onCenterChanged={e=>{
控制台日志（map）；
如果（地图）{
log（parseCoords（map.getCenter（））；
}
}}
>
{儿童}

事实上，

onCenterChanged

事件不接受以下内容中的任何参数：

相反，可以通过

onLoad

事件处理程序检索地图实例，并将地图中心保存在如下状态：

function Map(props) {
  const mapRef = useRef(null);
  const [position, setPosition] = useState({
    lat: -25.0270548,
    lng: 115.1824598
  });

  function handleLoad(map) {
    mapRef.current = map;
  }

  function handleCenterChanged() {
    if (!mapRef.current) return;
    const newPos = mapRef.current.getCenter().toJSON();
    setPosition(newPos);
  }

  return (
    <GoogleMap
      onLoad={handleLoad}
      onCenterChanged={handleCenterChanged}
      zoom={props.zoom}
      center={props.center}
      id="map"
    >
    </GoogleMap>
  );
}

功能图（道具）{
const mapRef=useRef（null）；
常量[位置，设置位置]=使用状态({
lat:-25.0270548，
液化天然气：115.1824598
});
功能手动加载（map）{
mapRef.current=map；
}
函数handleCenter已更改（）{
如果（！mapRef.current）返回；
const newPos=mapRef.current.getCenter（）.toJSON（）；
设置位置（newPos）；
}
返回(
);
}

---

下面是一个示例，演示了如何在拖动地图时将标记保持在地图的中心。

事实上，

onCenterChanged

事件不接受以下任何参数：

相反，可以通过

onLoad

事件处理程序检索地图实例，并将地图中心保存在如下状态：

function Map(props) {
  const mapRef = useRef(null);
  const [position, setPosition] = useState({
    lat: -25.0270548,
    lng: 115.1824598
  });

  function handleLoad(map) {
    mapRef.current = map;
  }

  function handleCenterChanged() {
    if (!mapRef.current) return;
    const newPos = mapRef.current.getCenter().toJSON();
    setPosition(newPos);
  }

  return (
    <GoogleMap
      onLoad={handleLoad}
      onCenterChanged={handleCenterChanged}
      zoom={props.zoom}
      center={props.center}
      id="map"
    >
    </GoogleMap>
  );
}

功能图（道具）{
const mapRef=useRef（null）；
常量[位置，设置位置]=使用状态({
lat:-25.0270548，
液化天然气：115.1824598
});
功能手动加载（map）{
mapRef.current=map；
}
函数handleCenter已更改（）{
如果（！mapRef.current）返回；
const newPos=mapRef.current.getCenter（）.toJSON（）；
设置位置（newPos）；
}
返回(
);
}

---

这是一个演示如何在拖动地图时将标记保持在地图中心位置的示例。

太棒了…谢谢你…我的头被这一个弄伤了这真的很有帮助！谢谢你太棒了…谢谢你…这件事让我抓狂了这真的很有帮助！非常感谢。

function Map(props) {
  const mapRef = useRef(null);
  const [position, setPosition] = useState({
    lat: -25.0270548,
    lng: 115.1824598
  });

  function handleLoad(map) {
    mapRef.current = map;
  }

  function handleCenterChanged() {
    if (!mapRef.current) return;
    const newPos = mapRef.current.getCenter().toJSON();
    setPosition(newPos);
  }

  return (
    <GoogleMap
      onLoad={handleLoad}
      onCenterChanged={handleCenterChanged}
      zoom={props.zoom}
      center={props.center}
      id="map"
    >
    </GoogleMap>
  );
}