在React中使用react-google-maps进行地理定位

Question

如何在react-google-maps中更改defaultCenter？我需要找到我的地理定位并更改缺省值lat和LNG。

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";

const getLocation = () =>{
   const pos = {};
   const geolocation = navigator.geolocation;
   if (geolocation) {
      geolocation.getCurrentPosition(findLocal, showEror);
   }
   function findLocal(position){
      pos.lat = position.coords.latitude;
      pos.lng = position.coords.longitude;
   }
   function showEror(){console.log(Error)}
   return pos;
};
const myLocation = getLocation(); // object has lat and lng

接下来，我需要将数据传输到组件MapWithAMarker:ecenter={myLocation}和Marker position={myLocation}

class GoogleMapCenter extends React.Component{
    render(){  
    const MapWithAMarker = withScriptjs(withGoogleMap(props =>
        <GoogleMap
            defaultZoom={10}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}>
            {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
        </GoogleMap>
    ));

    return(
        <MapWithAMarker
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />
    )
  }
}
export default GoogleMapCenter;

 <MapWithAMarker
            center={this.props.myLocation}
            position={this.props.myLocation}
            isMarkerShown
            googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp"
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `400px` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />

        <GoogleMap
            defaultZoom={10}
            defaultCenter={this.props.myLocation}>
            {props.isMarkerShown && <Marker position={this.props.myLocation} />}
        </GoogleMap>

Answer 1

像DefaultCenter这样的默认属性只能设置为初始状态，center属性可以用来重新呈现（居中）地图。

下面的示例演示如何基于当前位置将地图居中

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

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


  componentDidMount() {
    this.showCurrentLocation()
  }

  render() {
    return (
      <div>
        <MapWithAMarker
          isMarkerShown={this.state.isMarkerShown}
          currentLocation={this.state.currentLatLng} />
      </div>
    );
  }
}

哪里

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

演示（编辑）