обратный вызов onCenterChange возвращает неопределенное значение @ реагировать-google-maps / api - PullRequest
Новая
       33

обратный вызов onCenterChange возвращает неопределенное значение @ реагировать-google-maps / api

0 голосов
/ 20 января 2020

Я использую библиотеку под названием @react-google-maps/api, и я хочу сохранить центр карты как состояние реакции, и я хочу, чтобы пользователь мог перетаскивать карту, пока маркер всегда остается в центре карты ( uber style выбор местоположения)

Проблема в том, что когда я вызываю onCenterChange компонента, он возвращает мне неопределенный

и когда после сохранения экземпляр map (получен на onLoad callback) как состояние реакции. Экземпляр карты каждый раз возвращает один и тот же центр (я полагаю, состояние сохранения - stati c) 

<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>

1 Ответ

1 голос
/ 26 января 2020

Действительно, событие 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>
  );
}

Вот демо 1013 *, которое демонстрирует, как удерживать маркер в центре карты при перетаскивании карты.

...