时间戳

首页 > 解决方案 > onCenterChange 回调返回未定义的@react-google-maps/api

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

问题描述

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

问题是当我调用onCenterChange组件时，它返回给我 undefined

并且在将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>

标签： javascriptreactjsgoogle-maps-api-3react-google-maps

解决方案

事实上，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>
  );
}

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

推荐阅读