создать карту Google с местоположением пользователей с реагировать - PullRequest
Новая
       9

создать карту Google с местоположением пользователей с реагировать

0 голосов
/ 06 июля 2018

Я новичок в React и сейчас пытаюсь научиться использовать библиотеку react-google-maps. Пытался показать карту с геолокацией пользователей как initialCenter карты.

Это мой код: 

import React from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";

export class MapContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userLocation: { lat: 32, lng: 32 } };
  }
  componentWillMount(props) {
    this.setState({
      userLocation: navigator.geolocation.getCurrentPosition(
        this.renderPosition
      )
    });
  }
  renderPosition(position) {
    return { lat: position.coords.latitude, lng: position.coords.longitude };
  }
  render() {
    return (
      <Map
        google={this.props.google}
        initialCenter={this.state.userLocation}
        zoom={10}
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "-----------"
})(MapContainer);

При создании карты с местоположением пользователя я получаю initialCenter моих значений состояния по умолчанию.

Как я могу это исправить? Я даже использую функцию жизненного цикла, верно?

Большое спасибо за вашу помощь

1 Ответ

0 голосов
/ 06 июля 2018

navigator.geolocation.getCurrentPosition является асинхронным, поэтому вам необходимо использовать обратный вызов успеха и указать там местоположение пользователя.

Вы можете добавить дополнительный фрагмент состояния с именем, например, loading, и отображается только когда известна геолокация пользователя.

Пример 

export class MapContainer extends React.Component {
  state = { userLocation: { lat: 32, lng: 32 }, loading: true };

  componentDidMount(props) {
    navigator.geolocation.getCurrentPosition(
      position => {
        const { latitude, longitude } = position.coords;

        this.setState({
          userLocation: { lat: latitude, lng: longitude },
          loading: false
        });
      },
      () => {
        this.setState({ loading: false });
      }
    );
  }

  render() {
    const { loading, userLocation } = this.state;
    const { google } = this.props;

    if (loading) {
      return null;
    }

    return <Map google={google} initialCenter={userLocation} zoom={10} />;
  }
}

export default GoogleApiWrapper({
  apiKey: "-----------"
})(MapContainer);
...