在React / google-maps-react组件上从Web API设置地图的初始中心

Question

我正在使用google-maps react库，并且有一个关于在组件加载时从Web API检索纬度/经度坐标以填充地图中心的问题。我能够看到使用console.log()语句成功地进行了Web API调用并返回了我期望的值，但是没有使用这些值更新地图。我怀疑这与时机有关，但我不确定问题出在哪里。

我在构造函数和componentDidMount()方法中尝试了以下代码。两者都可以检索值，但都不能通过刷新映射来工作。我想这是我对React的事件/状态处理的误解：

componentDidMount() {
    const initialBoundingBoxapiUrl = 'https://localhost:44395/api/User/abc';
    fetch(initialBoundingBoxapiUrl)
      .then((response) => response.json())
      .then((data) => {
        console.log('Data returned = ' + data);
        var values = data.split(',');

        // this.state.lat = values[0];
        // this.state.lng = values[1];

        this.setState({lat:  values[0]});
        this.setState({lng:  values[1]});
    });
  }

state = {
    lat: "40.0",
    lng: "-74.0"
  };

我尝试过直接更新状态值和使用setState()方法。

如果我手动设置"lat“和"lng”状态值，而不是尝试从构造函数或componentDidMount()中的fetch()方法填充它们，中心就会像我预期的那样更新。

我的组件如下所示：

  <Map 
    apiKey={'allworkandnoplaymakesscottadullboy'}
    google={this.props.google} 
    initialCenter={{
        lat: this.state.lat,
        lng: this.state.lng
      }}
    zoom={13}>

我的努力到哪里去了？

Answer 1

看起来地图没有被更新到新中心状态的原因是因为您使用的是initialCenter参数，而不是center参数。如您所见，initialCenter只会在加载时设置地图的初始中心，这就是为什么它只返回中心状态的初始值。为此，可以在初始渲染后使用center参数重新渲染贴图。这些都是here提到的。

作为示例，您可以在更改componentDidMount中的中心状态值时使用initialCenter和center时看到以下示例代码。

CodeSnippet：

import React, { Component } from "react";
import { Map, GoogleApiWrapper } from "google-maps-react";

export class MapContainer extends Component {
  state = {
    center: {
      lat: 40.854885,
      lng: -88.081807
    }
  };

  componentDidMount() {
    let newLat = {
      lat: 0,
      lng: 0
    };
    this.setState({ center: newLat });
  }
  render() {
    if (!this.props.loaded) return <div>Loading...</div>;

    return (
      <div>
        <div>
          center value: {this.state.center.lat} , {this.state.center.lng}
        </div>
        <Map
          className="map"
          google={this.props.google}
          onClick={this.onMapClicked}
          center={this.state.center}
          style={{ height: "100%", position: "relative", width: "100%" }}
          zoom={8}
        />
      </div>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: "API_KEY"
})(MapContainer);