Как я могу получить "широту" и "долготу" после интеграции карт Google в мое веб-приложение Reactjs? - PullRequest
Новая
       42

Как я могу получить "широту" и "долготу" после интеграции карт Google в мое веб-приложение Reactjs?

0 голосов
/ 08 апреля 2019

Я создаю Reactjs приложение, в котором я хочу показывать карты Google в приложении ... Я хочу реализовать следующее

(1) моему приложению потребуются разрешения от пользователя для получения его текущей позиции и получения значений «широта» и «долгота» и их сохранение.

или

(2) пользователь выбирает маркер на карте, и я хочу получить эти точки широты и долготы.

первый важнее. Пожалуйста, помогите мне. пожалуйста, спасибо.

https://www.youtube.com/watch?v=4z4hxEHlsxc

я видел это видео, и это было полезно, но он не учил (1) проблеме .

1 Ответ

0 голосов
/ 08 апреля 2019

См. Мой пример Codepen здесь .Вы можете выполнить свою первую задачу.Для второго задания прочитайте документацию.Это довольно просто.Ссылки ниже.

Документация по маркерам

Документация по событиям

Кроме того, эта библиотека оченьхорошо справляется с Google Maps.посмотрите. 

class App extends React.Component {

  constructor(props) {
    super(props);

    this.map = null;
    this.marker = null;

    this.state = {
      currentLocation: {
        lat: 0.0,
        lng: 0.0
      }
    };
  }

  componentDidMount() {
    if (navigator && navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(pos => {
        const coords = pos.coords;
        this.setState({
          currentLocation: {
            lat: coords.latitude,
            lng: coords.longitude
          }
        });
        this.setPin(coords.latitude, coords.longitude)
      });

      this.map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
    }else{
      //TODO:
    }
  }

  setPin(lat, lng) {
    if(this.map) {
      this.map.setCenter({lat: lat, lng: lng});

      if(this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }

      this.marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        map: this.map,
        title: 'Current Location'
      });

    }else{
      console.log("Map has not loaded yet")
    }
  }

  render() {
    return (
      <div class="app">
        {this.state.currentLocation.lat } / {this.state.currentLocation.lng}
        <div id="map"></div>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
  document.getElementById('main')
);
...