Google Maps API动态传入lat/lng设置initialCenter显示位置异常

• initialCenter是google-maps-react提供的一次性初始化属性，仅在地图组件首次挂载时读取值生效，后续更新该属性不会修改地图中心。你首次执行render时componentDidMount还未触发，state中的lat、lng是空字符串，非法坐标会被地图默认解析为(0, 0)，也就是你看到的几内亚湾位置，后续setState更新也不会改变初始中心。
• localStorage中存储的所有值都是字符串类型，而Google Maps API要求经纬度传入数字类型，未做类型转换直接传入字符串也会被判定为非法值，触发默认(0,0) fallback。
• Marker的属性拼写错误，你写的postion是错的，正确属性名为position，会导致标记无法正常渲染。

1. 将地图的initialCenter属性替换为响应式的center属性，该属性会随传入值变化自动更新地图中心
2. 从localStorage取出经纬度后，转换为数字类型再存入state
3. 修正Marker的属性拼写错误

修改后的参考代码：

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

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


  componentDidMount(){
    // 转成数字类型
    const lat = Number(localStorage.getItem('lat'))
    const lng = Number(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}
                {/* 替换为响应式的center属性 */}
                center={{lat: this.state.lat, lng: this.state.lng}}
                >
                   <Marker 
                    label='Made Here'
                    {/* 修正拼写错误 */}
                    position={{ lat: this.state.lat, lng: this.state.lng }} 
                    />
                </Map>
        </div>
      );
    }
  }

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

内容的提问来源于stack exchange，提问作者Jonnyt101