如何获取用户的位置 - 在 React Map GL 中使用

Question

我用的是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>

我得到这样的道具：

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

Answer 1

我不知道如何使用 Geolocate 控件来实现这一点... 但另一种方法是仅使用用户的设备位置和纯 javascript 来获取当前位置... IE。像这样的：

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

希望这对某人有所帮助！