navigator.geolocation.getCurrentPosition 在 React Native 中不工作

Question

   constructor(props) {
        super(props);
        this.state = {
          initialPosition: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0,
                longitudeDelta: 0,
              }
        }; 
}

      componentDidMount () {
         navigator.geolocation.getCurrentPosition(
            (position) => {
                var lat = parseFloat(position.coords.latitude);
                var long = parseFloat(position.coords.longitude);


                var initialRegion = {
                    latitude: lat,
                    longitude: long,
                    latitudeDelta: LATITUDE_DELTA,
                    longitudeDelta: LONGITUDE_DELTA,
                }

                this.setState({ initialPosition: initialRegion});
            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
          );

我的 getCurrentPosition 功能不工作

获取当前位置后如何获取当前位置的名称。

如何解决？

Answer 1

位置

我认为您需要阅读有关位置在 react-native 中如何工作的文档。跟踪用户位置所需的所有方法都在那里。

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

getCurrentPosition

Invokes the success callback once with the latest location info.

这意味着每次调用此函数您只会获得一个更新。因此，如果您希望它获得连续的更新流，那么您就没有阅读文档。

watchPosition

Invokes the success callback whenever the location changes.

这意味着每当您的设备移动位置时，您都会收到通知，并且您可以使用新位置更新您的状态。但是，它只会在您移动位置时更新。如果您不移动位置，那么您将不会收到更新。

本教程将向您展示如何使用不同的定位方法。 https://hackernoon.com/react-native-basics-geolocation-adf3c0d10112

反向地理编码查找

其次，根据 GPS 坐标获取当前用户位置的名称称为反向地理编码查找。目前有一些包可以做到这一点

https://www.npmjs.com/package/@kiwicom/react-native-reverse-geocode

https://www.npmjs.com/package/@binpar/react-native-geocoder

https://www.npmjs.com/package/react-native-geocoder

其中有些在 alpha/beta 中，有些已经很久没有更新了。所以你的里程可能会有所不同，但是你不能将这些包与 Expo 一起使用。

使用提取和 google api

进行反向地理编码

您应该查看 google 的文档。 https://developers.google.com/maps/documentation/geocoding/start#reverse

Reminder: To use the Geocoding API, you must get an API key and you must enable billing. You can enable billing when you get your API key (see the Quick guide) or as a separate process (see Usage and Billing).

这个简单的函数应该允许您执行反向地理编码查找，您只需要传递纬度、经度和您的 Google API 键

async getAddress (latitude, longitude, APIKEY) {
  let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${APIKEY}`;
  try {
    let response = await fetch(url);
    let responseJson = await response.json();
    // do what you want with the responseJson here.
    return responseJson
  } catch (error) {
    console.warn(error); 
    // make sure you handle error and return something if an error occurs
  }
}

Answer 2

这就是您从 google 地图 api.

中获取地址和您想要的一切的方式

handleAddress = () => {
        const API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
        const {latitude, longitude} = this.props;
        const requestOption = {
            method: 'GET'
        };

        fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${latitude},${longitude}&key=${API_KEY}`, requestOption)
            .then(res => res.json())
            .then(response => {
                this.setState({
                    address: response.results[0].formatted_address});
            })
            .catch(error => {
                console.warn(error);
            });
    };

navigator.geolocation.getCurrentPosition 在 React Native 中不工作

navigator.geolocation.getCurrentPosition is not working in React Native

android

reactjs

react-native

react-native-maps

位置

反向地理编码查找

使用提取和 google api