Обновите карту Google на основе геолокации с помощью React

Я пытаюсь показать карту Google с центрированием карты на основе широты и долготы, которые возвращаются геолокацией. Однако карта отображается как значение по умолчанию и не отображается с помощью значений геолокации. Я устанавливаю широту и долготу в состоянии компонента и пытаюсь повторно отобразить компонент после обновления состояния. Но это не работает. Ниже мой код.

MapView.js

import React, { Component } from 'react'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'
import MapComponent from './MapComponent'

class MapView extends Component {
  constructor(props){
    super(props)
    this.state = {
      currentLatLng: {
        lat: 0,
        lng: 0
      },
      isMarkerShown: false
    }
  }

  componentWillUpdate(){
    this.getGeoLocation()
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.getGeoLocation()
      this.setState({ isMarkerShown: true })
    }, 5000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  getGeoLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          this.setState({
            lat: position.coords.latitude,
            lng: position.coords.longitude
          })
        }
      )
    } else {
      error => console.log(error)
    }
  }

  render() {
    return (
      <MapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
        currentLocation={this.state.currentLatLng}
      />
    )
  }
}

export default MapView;

MapComponent.js

import React, { Component } from 'react'
import { compose, withProps } from 'recompose'
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'

const MapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }}
  >
    {props.isMarkerShown && <Marker position={{ lat: props.currentLocation.lat, lng: props.currentLocation.lng }} onClick={props.onMarkerClick} />}
  </GoogleMap>
)

export default MapComponent

reactjs google-maps geolocation react-google-maps
person shinyatk    schedule 10.06.2018    source источник

Ответы (2)


arrow_upward
8
arrow_downward

На самом деле карта не центрирована, так как currentLatLng не обновляется, вам может понадобиться что-то вроде этого:

getGeoLocation = () => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                position => {
                    console.log(position.coords);
                    this.setState(prevState => ({
                        currentLatLng: {
                            ...prevState.currentLatLng,
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        }
                    }))
                }
            )
        } else {
            error => console.log(error)
        }
    }

вместо оригинальной функции getGeoLocation

person Vadim Gremyachev    schedule 10.06.2018
comment
Ваши решения работают отлично! Я не думал о prevState и слиянии с текущим состоянием. Большое спасибо! - person shinyatk; 11.06.2018

arrow_upward
0
arrow_downward

Согласно w3.org, текущее местоположение можно получить с помощью:

function showMap(position) {
    // Show a map centered at (position.coords.latitude, position.coords.longitude).
    console.log(position.coords.latitude);
    console.log(position.coords.longitude);
  }

  // One-shot position request.
  navigator.geolocation.getCurrentPosition(showMap);

Это связывает API геолокации: API геолокации w3.org

Это сработало для меня, высокая точность определения местоположения.

person Diego Santa Cruz Mendezú    schedule 24.09.2018