React Google Maps不加载指定经纬度而是显示随机位置如何解决

核心问题 #

你使用google-map-react的属性逻辑错误，存在属性冲突和无效属性的问题：

• 该库的地图中心属性不支持在组件根位置直接传递单独的lat、lng参数，只有子标记组件才支持单独传lat、lng定位标记点，你写在GoogleMapReact标签上的lat={45.756659}、lng={21.228703}是无效属性，不会被识别为地图中心坐标。
• 你使用了非受控属性defaultCenter，该属性只会在组件第一次初始化时生效，你设置的defaultCenter值为默认props里的{lat: 59.95, lng: 30.33}，所以地图初始化后自然定位到该坐标，不会匹配你标记点的位置。

修复方案 #

方案1：非受控模式（仅需要初始化定位，后续不会动态修改地图中心） #

直接修改defaultCenter的值为你想要的目标坐标，删掉GoogleMapReact标签上无效的lat、lng属性即可，修改后的组件代码如下：

<GoogleMapReact
  bootstrapURLKeys={{ key:"my key" }}
  defaultCenter={{
    lat: 45.756659,
    lng: 21.228703
  }}
  defaultZoom={this.props.zoom}
  yesIWantToUseGoogleMapApiInternals
>
  <AnyReactComponent
    lat={45.756659}
    lng={21.228703}
    text="Service Location"
  />
</GoogleMapReact>

方案2：受控模式（后续需要动态修改地图中心） #

把defaultCenter替换为受控属性center，配合组件state管理坐标值即可，后续修改state里的坐标值，地图中心就会同步更新。

额外提示 #

你外层容器div设置的justifyContent: 'flex-end'不会生效，因为没有给该div设置display: 'flex'属性，不过该问题不影响地图定位功能。

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