реагировать- google-maps onBoundsChanged - PullRequest
Новая
       20

реагировать- google-maps onBoundsChanged

0 голосов
/ 03 апреля 2020

Я изо всех сил пытаюсь найти простой пример того, как использовать onBoundsChanged. Я заметил, что эта функция не описана в документации https://tomchentw.github.io/react-google-maps

Мой простой код выглядит так: 

import React, { Component } from 'react';
import { GoogleMap } from '@react-google-maps/api';


export class App extends Component {

  state = {
    mapLat: 48.210033,
    mapLng: 16.363449,
  }

  handleBoundsChanged = () => {
    console.log('BoundsChanged');
    // how do I get the center of the map on BoundsChange
    // update map center
    /*
    this.setState({
      mapLat: '?',
      mapLng: '?'
    })
    */
  }

  render() {
    return (
      <div>
            <GoogleMap
              center={{ lat: this.state.mapLat, lng: this.state.mapLng }}
              zoom={ 13 }
              onBoundsChanged={e => this.handleBoundsChanged(e)}
            />
      </div>
    );
  }
}

export default App;

Я не понимаю, как получить данные с карты - onBoundsChanged , Мне нужно получить широту и долготу центра карты, чтобы я мог обновить состояние. Я думаю, что это базовая c функциональность, и это легко для тех, кто уже сделал это. Большое спасибо за вашу помощь.

1 Ответ

0 голосов
/ 03 апреля 2020

Вы можете добавить ref реквизит для доступа к карте внутри компонента. 

export class App extends Component {
   state = {
      mapLat: 48.210033,
      mapLng: 16.363449,
    };

   mapRef = React.createRef(); //class scope

Добавить реквизит на карту компонента 

   <GoogleMap
      ref={this.mapRef}
      center={{ lat: this.state.mapLat, lng: this.state.mapLng }}
      zoom={ 13 }
      onBoundsChanged={e => this.handleBoundsChanged(e)}
    />

Затем в обработчике 

handleBoundsChanged = () => {
    const lat= this.mapRef.current.getCenter().lat();
    const lng = this.mapRef.current.getCenter().lng();

    this.setState({
      mapLat: lat,
      mapLng: lng
    });
  }
...