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

时间:2019-01-14 10:38:16

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

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

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

如何解决?

2 个答案:

答案 0 :(得分:1)

位置

我认为您需要阅读文档以了解本机如何在本机中工作。跟踪用户位置所需的所有方法都在那里。

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中使用这些套餐。

使用提取和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
  }
}

答案 1 :(得分:0)

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