Обновление React State из события Google Maps - PullRequest
Новая
       51

Обновление React State из события Google Maps

0 голосов
/ 03 октября 2019

enter image description here Привет, ребята, я установил пакет google-map-react и не могу обновить состояние в прослушивателях событий Google

вот мой код 

 const handleApi = ({ map, maps }) => {
    marker = new maps.Marker({
      position: center,
      map: map,
      animation: maps.Animation.DROP,
      draggable: false,
      title: 'Hello World!'
    });
    maps.event.addListener(map, 'zoom_changed', () => {
      // console.log(center, 'inside zoom');
      const latlng = getLatLng(maps, center);
      // Pans the map to the marker
      map.panTo(latlng);
      marker.setPosition(latlng);
    });
    maps.event.addListener(map, 'drag', () => {
      const centerMap = getCenter(map);
      const latlng = getLatLng(maps, centerMap);
      marker.setPosition(latlng);
      changeCenter(centerMap);
      console.log(centerMap, center);
    });
  };
  console.log(center);
  return (
    <div style={{ width: 400, height: 400 }}>
      <GoogleMap
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={handleApi}
        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAP_KEY }}
        defaultCenter={{ lat: 20.865327, lng: 74.776758 }}
        defaultZoom={14}
        options={{
          scrollwheel: true,
          styles: mapStyles
        }}
      />
    </div>
  );

Как видно из рисунка, состояние не обновляется в списке, а обновляется вне его. Мои проблемы:

  1. Как мне получить доступ к состоянию внутри слушателя?
  2. Как мне получить доступ к свойствам maps и map вне метода handleApi, так как я хочу бытьвозможность установить маркер на основе центра, полученного с помощью prop
...