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

Question

我一直在使用一个名为 @react-google-maps/api 的库，我想将地图中心存储为反应状态，并且我希望用户能够拖动地图，而标记始终停留在地图的中心（超级风格位置选择）

问题是当我调用组件的onCenterChange 时，它返回我未定义

当将map 实例（在onLoad 回调中收到）存储为反应状态之后。地图实例每次都返回完全相同的中心（我猜状态保存是静态的）

<GoogleMap
        id={id}
        zoom={zoom}
        center={center}
        options={options}
        mapContainerStyle={{ width, height }}
        onLoad={m => {
          if (!map) setMap(m);
        }}
        onCenterChanged={e => {
          console.log(map);
          if (map) {
            console.log(parseCoords(map.getCenter()));
          }
        }}
      >
        {children}
      </GoogleMap>

Answer 1

确实，onCenterChanged 事件不接受@react-google-maps/api 中的任何参数：

onCenterChanged?: () => void;

相反，可以通过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>
  );
}

这是一个demo，它演示了如何在拖动地图时使标记保持在地图的中心。