使用React创建带有用户位置的谷歌地图

Question

我是 React 的新手，目前正在尝试学习如何使用react-google-maps库。尝试显示具有用户地理位置的地图作为地图的initialCenter。

这是我的代码：

import React from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";
export class MapContainer extends React.Component {
constructor(props) {
super(props);
this.state = { userLocation: { lat: 32, lng: 32 } };
}
componentWillMount(props) {
this.setState({
userLocation: navigator.geolocation.getCurrentPosition(
this.renderPosition
)
});
}
renderPosition(position) {
return { lat: position.coords.latitude, lng: position.coords.longitude };
}
render() {
return (
<Map
google={this.props.google}
initialCenter={this.state.userLocation}
zoom={10}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: "-----------"
})(MapContainer);

为了创建带有用户位置的地图，我得到了默认状态值的initialCenter。

我该如何解决它？我什至使用生命周期功能正确吗？

非常感谢您的帮助

Answer 1

navigator.geolocation.getCurrentPosition

是异步的，因此您需要使用成功回调并在其中设置用户位置。

您可以添加一个名为loading，并且仅在知道用户的地理位置时呈现。

例

export class MapContainer extends React.Component {
state = { userLocation: { lat: 32, lng: 32 }, loading: true };
componentDidMount(props) {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude } = position.coords;
this.setState({
userLocation: { lat: latitude, lng: longitude },
loading: false
});
},
() => {
this.setState({ loading: false });
}
);
}
render() {
const { loading, userLocation } = this.state;
const { google } = this.props;
if (loading) {
return null;
}
return <Map google={google} initialCenter={userLocation} zoom={10} />;
}
}
export default GoogleApiWrapper({
apiKey: "-----------"
})(MapContainer);