navigator.geolocation.getCurrentPosition 在 React Native 中不起作用答案

【问题标题】：navigator.geolocation.getCurrentPosition is not working in React Nativenavigator.geolocation.getCurrentPosition 在 React Native 中不起作用
【发布时间】：2019-01-14 10:38:15
【问题描述】：

   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 功能不起作用

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

如何解决？

【问题讨论】：

定义：“不工作”会发生什么？你期待什么？
你不是在这里问过这个问题吗stackoverflow.com/questions/54176353/…
@Andrew 现在我意识到我的 getCurrentPosition 也不起作用。我不知道为什么。

标签： android reactjs react-native react-native-maps

【解决方案1】：

位置

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

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

getCurrentPosition

使用最新的位置信息调用一次成功回调。

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

watchPosition

每当位置改变时调用成功回调。

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

本教程将向您展示如何使用不同的定位方法。 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 一起使用。

使用 fetch 和 google api 进行反向地理编码

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

提醒：要使用地理编码 API，您必须获得 API 密钥，并且您必须启用计费。您可以在获得 API 密钥后启用计费（见快速指南）或作为一个单独的过程（见使用和计费）。

这个简单的功能应该允许您执行反向地理编码查找，您只需要传递纬度、经度和您的 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
  }
}

【讨论】：

如何从 google apis 密钥中获取它？
查看我的更新，但请注意，使用 Geocoding API 可能会产生成本。

【解决方案2】：

这是您从 google map 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);
            });
    };

【讨论】：