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

问题描述

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

我在构造函数和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}>

我的努力哪里误入歧途了？

解决方法

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

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

代码片段：

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