google-maps - 如何使用（React Native，Geolocation）实时更新经纬度

Question

我是这种情况下的新手，我希望有人可以帮助我

我有关于实时获取纬度和经度的问题，当我移动到某个地方时，纬度和经度的结果仍然相同。

我向您展示我已经制作的代码。

          constructor(props) {
        super(props);
        this.state = {
          latitude: null,
          longitude: null,
          error: null,
          lastPosition: null
        };
      }



    componentDidMount() {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.setState({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
              error: null,
            });
          },
          (error) => this.setState({ error: error.message }),
          { enableHighAccuracy: false, timeout: 20000,  maximumAge: 1000 },


        );

        this.watchID = navigator.geolocation.watchPosition((position) => {
          const lastPosition = JSON.stringify(position);
          this.setState({ lastPosition });
       });

      }

  componentWillUnmount() {

    window.navigator.geolocation.clearWatch(this.watchId)

  }

  render() {
    return (
      <View style={styles.container}>
          <Text>Latitude: {this.state.latitude}</Text>
          <Text>Longitude: {this.state.longitude}</Text>

          <Text>lastPosition: {this.state.lastPosition}</Text>
          {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
      </View>
    );
  }

标签： google-mapsreact-native

Answer 1

watchPosition()的真实用法

https://facebook.github.io/react-native/docs/geolocation#watchposition

默认进近distanceFilter设置为 100 米。它可以设置为 1 米，因此您可以捕捉到任何位置变化。

尝试这个

this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
        const lastPosition = JSON.stringify(position);
        console.log(lastPosition);
        this.setState({ lastPosition });
    }
},
(error) => console.log(error)),
{enableHighAccuracy: true, timeout: 10000, maximumAge: 0, distanceFilter: 1});