Google реагирует на карту - центр карты не обновляется - PullRequest
Новая
       18

Google реагирует на карту - центр карты не обновляется

0 голосов
/ 09 февраля 2020

Я использую Google map, реагирую на отображение маркеров на карте. Используйте этот URL, чтобы получить пример https://codesandbox.io/s/2oy1nj9kyy

Проблема заключается в том, что когда я перемещаю карту с помощью мыши и обновляю значение центра карты, карта не перемещается в местоположение, указанное в качестве центра , Может кто-нибудь помочь, пожалуйста?

1 Ответ

0 голосов
/ 12 февраля 2020

Вы можете установить функцию панорамирования, которая будет перемещать карту по значению вашего центра при каждом нажатии кнопки. Вот пример кода . Вот объяснение для вашей справки:

  1. В вашем классе GMapReact используйте onGoogleApiLoaded для доступа к объекту Google Maps. Вам также необходимо установить yesIWantToUseGoogleMapApiInternals в true и установить объявление функции PanTo , передающей объект карты. Это должно выглядеть так: 
class GMapReact extends React.Component {
  render() {
    const { center, zoom } = this.props;
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <GoogleMap
          bootstrapURLKeys={{ key: [GOOGLE_API_KEY] }}
          center={center}
          zoom={zoom}
          yesIWantToUseGoogleMapApiInternals
          onGoogleApiLoaded={({ map }) => PanTo(map)}
        />
      </div>
    );
  }
}
Объявите глобальную переменную, которая будет содержать объект карты (в данном случае это map2): var map2;. Вам также необходимо объявить глобальную переменную, в которой будут храниться ваши координаты: var latlng; Затем выполните функцию PanTo: 
function PanTo(map) {
  //this will assign the map object at instantiation to global variable map2.
  map2 = map;
  map.panTo(latlng);
}
В вашем методе handleClick () вам необходимо сохранить значение this.state.form в глобальной переменной, поскольку функция PanTo находится вне класса. Затем вам нужно вызвать функцию PanTo, передающую объект карты. Поскольку значение latlng теперь имеет значение, оно будет вызываться в этой строке в функции PanTo map.panTo(latlng);. Добавьте следующую строку в ваш код: 
 latlng = this.state.form;
 PanTo(map2);

Надеюсь, это поможет!

...