IT技术 - 如何获取用户的位置 - 在 React Map GL 使用 - 吾爱随笔录

我正在使用 React Map GL，我想输入用户的经纬度

像这样返回组件：

export default geolocated({
  positionOptions: {
    enableHighAccuracy: false
  },
  userDecisionTimeout: 5000
})(Layout);

我试图使用 react-geolocated 但它返回空坐标。

我想在组件安装时获取这些信息，这就是代码：

 componentDidMount() {

    console.log(this.props);
    if (navigator.geolocation) {

     const viewport = {
         ...this.state.viewport,
         latitude: this.props.coords.latitude,
        longitude: this.props.coords.longitude
     };

       this.setState({ viewport });
  }

}

地图组件：

<MapGL
            {...viewport}
            //onClick={this.handleMapClick}
            mapStyle="mapbox://styles/mapbox/streets-v9"
            mapboxApiAccessToken={TOKEN}
            perspectiveEnabled
            onViewportChange={viewport => this.setState({ viewport })}
          >
            <div className="geo" style={geolocateStyle}>
              {" "}
              <GeolocateControl
                positionOptions={{ enableHighAccuracy: true }}
                trackUserLocation={true}
              />
            </div>

            <div className="nav" style={navStyle}>
              <NavigationControl
                onViewportChange={viewport => this.setState({ viewport })}
              />
            </div>
          </MapGL>

我得到这样的props：

{coords: null, isGeolocationAvailable: true, isGeolocationEnabled: true, positionError: null}

useEffect(() => { navigator.geolocation.getCurrentPosition(pos => { setViewport({ ...viewport, latitude: pos.coords.latitude, longitude: pos.coords.longitude }); }); }, []);