小编ari*_*km9的帖子

用react创建用户位置的google map

我是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);
Run Code Online (Sandbox Code Playgroud)

通过创建具有用户位置的地图,我得到了initialCenter默认状态值。

我该如何解决?我什至在使用生命周期功能吗?

非常感谢您的帮助

javascript google-maps reactjs react-google-maps

3
推荐指数
1
解决办法
3356
查看次数