Reactjs 在React中使用React谷歌地图进行地理定位

如何更改谷歌地图中的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

我需要用Amarker将数据传输到组件映射：Сenter={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;

类GoogleMapCenter扩展了React.Component{
render（）{
const MapWithAMarker=withScriptjs（withGoogleMap（props=>
{props.ismarkersown&}
));
返回(
)
}
}
导出默认谷歌地图中心；

如果我使用这个.props，它将不起作用

 <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%` }} />}
        />

或

{props.ismarkersown&}

像

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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
当前LATLNG：{
纬度：0，
液化天然气：0
},
伊斯马克镇：错
}
}
showCurrentLocation=（）=>{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition(
位置=>{
this.setState（prevState=>({
当前LATLNG：{
…prevState.CurrentLatling，
纬度：位置坐标纬度，
lng:position.coords.longitude
},
伊斯马克镇：是的
}))
}
)
}否则{
error=>console.log（错误）
}
}
componentDidMount（）{
this.showCurrentLocation（）
}
render（）{
返回(
);
}
}

在哪里

const MapWithAMarker=compose(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js",
加载元素：，
集装箱运输：，
mapElement:，
}),
用ScriptJS，
用谷歌地图
)（（道具）=>
{props.ismarkersown&}
)

---

什么是导航器？

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>
)