Могу ли я установить значение центра по умолчанию в response-googe-maps / api? - PullRequest
Новая
       27

Могу ли я установить значение центра по умолчанию в response-googe-maps / api?

0 голосов
/ 06 мая 2020

Некоторое время я использовал исходный пакет react-google-maps, но понял, что он не обновлялся пару лет, поэтому я установил обновленный пакет под названием react-google-maps/api. В обоих пакетах есть компонент под названием <GoogleMap/>, но в старом пакете есть свойство, которое вы можете передать ему, под названием defaultCenter. Объявление этого свойства приведет к тому, что при монтировании компонента карты это значение будет центром, но не изменит центр при повторной визуализации компонента. В этом новом пакете есть только свойство с именем center, и карта будет go возвращаться к этому значению при каждом повторном рендеринге. Вот код, иллюстрирующий мою проблему: 

import { GoogleMap, LoadScript } from '@react-google-maps/api'

function App() {

  const [someState, setSomeState] = useState(false);

  return (
    <div className="App">
      <button className="" onClick={() => {someState ? setSomeState(false) : setSomeState(true)}}>Click</button>
      <LoadScript
        id="script-loader"
        googleMapsApiKey=""
      >
        <GoogleMap
          id='example-map'
          mapContainerStyle={{
            height: '900px',
            width: '900px'}}
          center={{lat:41, lng: -71}}
          zoom={4}
        >
        </GoogleMap>
      </LoadScript>
    </div>
  );
}

export default App;

вот что происходит:
1) Страница загружается в указанный центр
2) Я перетаскиваю карту в другое место
3) Я нажимаю кнопка, которая изменяет состояние
4) Карта перезагружается обратно в исходный центр

как я могу заставить карту оставаться в ее текущем местоположении, когда я нажимаю кнопку, которая устанавливает состояние?

1 Ответ

0 голосов
/ 06 мая 2020

Этого и следовало ожидать. Когда компонент <App/> повторно визуализируется, то же самое происходит и с компонентом <GoogleMap/> внутри.

Вы можете получить экземпляр карты с помощью свойства onLoad и хука useRef, поэтому вы можете использовать экземпляр с .current и иметь центр в состоянии.

Когда пользователь перетаскивает карту (запускает события onDrag, onDragEnd и onDragStart), вы можете установить новый центр с помощью сохраненного экземпляра ссылки . 

function App() {
  const mapRef = useRef(null);
  const [position, setPosition] = useState({
      lat: 41, 
      lng: -71
  });

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

  function handleCenter() {
    if (!mapRef.current) return;

    const newPos = mapRef.current.getCenter().toJSON();
    setPosition(newPos);
  }

  return (
    <GoogleMap
      zoom={4}
      onLoad={handleLoad}
      onDragEnd={handleCenter}
      center={position}
      id="map"
      mapContainerStyle={{
        height: '900px',
        width: '900px'
      }}
    >
   </GoogleMap>
  );
}
...