如何解决在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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。