使用 React 根据地理位置更新 Google 地图

Posted 2023-02-23

【中文标题】使用 React 根据地理位置更新 Google 地图

【英文标题】：Update Google Map based on Geolocation with React

【发布时间】：2018-06-10 03:57:04

【问题描述】：

我正在尝试根据 Geolocation 返回的纬度和经度显示 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

【参考方案1】：

事实上地图没有居中，因为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函数

【讨论】：

您的解决方案完美运行！我没有考虑过“prevState”并与当前状态合并。非常感谢！

【参考方案2】：

根据 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： Geolocation API w3.org

这对我有用，定位精度高。