谷歌地图 API 动态 lat/lng 初始中心未显示正确位置

Question

我正在使用本地存储来存储 lat/lng，它是来自另一个组件的产品的一部分。我得到项目 lat/lng 并将它们设置为状态，以在地图中使用。当我逐步浏览所有内容时，它是正确的 lat:32.735962/lng:-96.275256 位于德克萨斯州达拉斯郊外的位置，但是当地图渲染时，它位于几内亚湾的中心。如果我对相同的 lat/lng 进行硬编码，它会呈现正确的位置。

import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
import '../css/googleMaps.css';




export class Maps extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        lat: '',
        lng: ''
    };
}


  componentDidMount(){
    const lat = localStorage.getItem('lat')
    const lng = localStorage.getItem('lng')
    this.setState({
      lat: lat,
      lng: lng
    })
  }

    logOut = () => {
        localStorage.removeItem('token');
        window.location = '/';
    };

    back = () => {
        localStorage.removeItem('lat')
        localStorage.removeItem('lng')
        window.location = '/patronmain';
    };

    render() {
      const mapStyles = {
        width: "60%",
        height: "60%",
      };
      return (
          <div>
                
                    <p className="lOut" onClick={() => this.logOut()}>Logout</p>
                    <p className="lOut" onClick={() => this.back()}>Back</p>
         
                <Map
                google={this.props.google}
                zoom={5}
                style={mapStyles}
                initialCenter={{lat: this.state.lat, lng: this.state.lng}}
                >
                   <Marker 
                    label='Made Here'
                    postion={{ lat: this.state.lat, lng: this.state.lng }} 
                    />
                </Map>
        </div>
      );
    }
  }



  export default GoogleApiWrapper({
    apiKey: ''
  })(Maps);

Answer 1

您的地图位于几内亚湾某处的中心，因为您的 initialCenter 的值来自您所在州的值“”。这意味着您的latLng 的值是"",""，地图将其视为0,0 。

请注意initialCenter 参数接受一个包含经纬度坐标的对象。加载时设置地图中心。

要在更改状态值时更改地图的中心，您需要使用center 参数，该参数接受包含纬度和经度坐标的对象。如果您想在初始渲染后重新渲染地图，则使用此选项。