如何在 React Native Expo 中使用 google 反向地理编码？

Question

我想在我的应用程序中放置一个按钮，当按下该按钮时 return 单元格的当前地址 phone。

我能够 return 正确的纬度和经度，并将此数据转换为我到达 react-native-geocoder 库的地址。

我当前的代码如下所示：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Geocoder from 'react-native-geocoder';
 // 0.4.8

class GeolocationExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }

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

  render() {
    Geocoder.geocodePosition(this.state.latitude,this.state.longitude)
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>

        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
         <Button
          style={{ marginTop: 30 }}
          onPress={() => { this.refresh(); }}
          title="Refresh"
        />
      </View>
    );
  }
}

export default GeolocationExample;

根据我在 Geocoder.geocodePosition(this.state.latitude,this.state.longitude) 中的理解，returning 地址，但我不明白如何从那里获取这些数据。

小吃中的代码：https://snack.expo.io/rJhYwaG2Z

Answer 1

您不需要来自 LatLon 的反向地理编码库，您可以直接调用 Google 地图 API，例如：

fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + myLat + ',' + myLon + '&key=' + myApiKey)
        .then((response) => response.json())
        .then((responseJson) => {
            console.log('ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson));
})

（记得提供您的 Google 地图 API 密钥！！）

结果对象将包含该 LatLon 的所有地址组件。

Example result

{"results":[{"address_components":[{"long_name":"540","short_name":"540","types":["street_number"]},{"long_name":"Avenida Alda Garrido","short_name":"Av. Alda Garrido","types":["route"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22640-000","short_name":"22640-000","types":["postal_code"]}],"formatted_address":"Av. Alda Garrido, 540 - Barra da Tijuca, Rio de Janeiro - RJ, 22640-000, Brazil","geometry":{"location":{"lat":-23.0077328,"lng":-43.315117},"location_type":"ROOFTOP","viewport":{"northeast":{"lat":-23.0063838197085,"lng":-43.3137680197085},"southwest":{"lat":-23.0090817802915,"lng":-43.3164659802915}}},"place_id":"ChIJfSac_7vQmwARNiQbMrnXe4E","types":["street_address"]},{"address_components":[{"long_name":"Apto 301","short_name":"Apto 301","types":["subpremise"]},{"long_name":"470","short_name":"470","types":["street_number"]},{"long_name":"Avenida Alda Garrido","short_name":"Av. Alda Garrido","types":["route"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22621-000","short_name":"22621-000","types":["postal_code"]}],"formatted_address":"Av. Alda Garrido, 470 - Apto 301 - Barra da Tijuca, Rio de Janeiro - RJ, 22621-000, Brazil","geometry":{"location":{"lat":-23.0079088,"lng":-43.3148068},"location_type":"ROOFTOP","viewport":{"northeast":{"lat":-23.0065598197085,"lng":-43.3134578197085},"southwest":{"lat":-23.0092577802915,"lng":-43.3161557802915}}},"place_id":"ChIJpQ8sq77QmwARA6fRe9QZWZ0","types":["establishment","lodging","point_of_interest"]},{"address_components":[{"long_name":"589","short_name":"589","types":["street_number"]},{"long_name":"Avenida Alda Garrido","short_name":"Av. Alda Garrido","types":["route"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22620-171","short_name":"22620-171","types":["postal_code"]}],"formatted_address":"Av. Alda Garrido, 589 - Barra da Tijuca, Rio de Janeiro - RJ, 22620-171, Brazil","geometry":{"location":{"lat":-23.0081304,"lng":-43.3147502},"location_type":"ROOFTOP","viewport":{"northeast":{"lat":-23.0067814197085,"lng":-43.3134012197085},"southwest":{"lat":-23.0094793802915,"lng":-43.3160991802915}}},"place_id":"ChIJr2eVq77QmwARA3U9jQNI5Z8","types":["establishment","premise"]},{"address_components":[{"long_name":"540","short_name":"540","types":["street_number"]},{"long_name":"Avenida Alda Garrido","short_name":"Av. Alda Garrido","types":["route"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22620-171","short_name":"22620-171","types":["postal_code"]}],"formatted_address":"Av. Alda Garrido, 540 - Barra da Tijuca, Rio de Janeiro - RJ, 22620-171, Brazil","geometry":{"location":{"lat":-23.0078265,"lng":-43.3151749},"location_type":"RANGE_INTERPOLATED","viewport":{"northeast":{"lat":-23.0064775197085,"lng":-43.3138259197085},"southwest":{"lat":-23.0091754802915,"lng":-43.3165238802915}}},"place_id":"EkRBdi4gQWxkYSBHYXJyaWRvLCA1NDAgLSBCYXJyYSBkYSBUaWp1Y2EsIFJpbyBkZSBKYW5laXJvIC0gUkosIEJyYXppbCIbEhkKFAoSCXvIbAC80JsAEXZMHH23Zf8TEJwE","types":["street_address"]},{"address_components":[{"long_name":"Avenida Alda Garrido","short_name":"Av. Alda Garrido","types":["route"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22620-171","short_name":"22620-171","types":["postal_code"]}],"formatted_address":"Av. Alda Garrido - Barra da Tijuca, Rio de Janeiro - RJ, 22620-171, Brazil","geometry":{"bounds":{"northeast":{"lat":-23.0077138,"lng":-43.3146692},"southwest":{"lat":-23.0080912,"lng":-43.3153903}},"location":{"lat":-23.0079025,"lng":-43.3150298},"location_type":"GEOMETRIC_CENTER","viewport":{"northeast":{"lat":-23.0065535197085,"lng":-43.3136807697085},"southwest":{"lat":-23.0092514802915,"lng":-43.3163787302915}}},"place_id":"ChIJe8hsALzQmwARd0wcfbdl_xM","types":["route"]},{"address_components":[{"long_name":"22620-400","short_name":"22620-400","types":["postal_code"]},{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"Barra da Tijuca, Rio de Janeiro - State of Rio de Janeiro, 22620-400, Brazil","geometry":{"bounds":{"northeast":{"lat":-23.0078347,"lng":-43.3137711},"southwest":{"lat":-23.0118196,"lng":-43.3149785}},"location":{"lat":-23.0108544,"lng":-43.3146249},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-23.0078347,"lng":-43.31302581970849},"southwest":{"lat":-23.0118196,"lng":-43.31572378029149}}},"place_id":"ChIJxyn3hb7QmwARggN-wB930Xo","types":["postal_code"]},{"address_components":[{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]},{"long_name":"22620-171","short_name":"22620-171","types":["postal_code"]}],"formatted_address":"Barra da Tijuca, Rio de Janeiro - State of Rio de Janeiro, Brazil","geometry":{"bounds":{"northeast":{"lat":-23.0009429,"lng":-43.2977475},"southwest":{"lat":-23.0153102,"lng":-43.3294084}},"location":{"lat":-23.0093991,"lng":-43.3173933},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-23.0009429,"lng":-43.2977475},"southwest":{"lat":-23.0153102,"lng":-43.3294084}}},"place_id":"ChIJ2zZsIqPQmwARquMCy3yno4Q","types":["postal_code","postal_code_prefix"]},{"address_components":[{"long_name":"Barra da Tijuca","short_name":"Barra da Tijuca","types":["political","sublocality","sublocality_level_1"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"Barra da Tijuca, Rio de Janeiro - State of Rio de Janeiro, Brazil","geometry":{"bounds":{"northeast":{"lat":-22.9642374,"lng":-43.2844897},"southwest":{"lat":-23.0228827,"lng":-43.45027049999999}},"location":{"lat":-23.0003709,"lng":-43.36589499999999},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-22.9642374,"lng":-43.2844897},"southwest":{"lat":-23.0228827,"lng":-43.45027049999999}}},"place_id":"ChIJXf62J0ramwARTg-e2NH2w2M","types":["political","sublocality","sublocality_level_1"]},{"address_components":[{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"Rio de Janeiro - State of Rio de Janeiro, Brazil","geometry":{"bounds":{"northeast":{"lat":-22.7460201,"lng":-43.0990395},"southwest":{"lat":-23.0828927,"lng":-43.7965385}},"location":{"lat":-22.9112301,"lng":-43.4452148},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-22.7460201,"lng":-43.0990395},"southwest":{"lat":-23.0828927,"lng":-43.7965385}}},"place_id":"ChIJC7UkQv5-mQAR7llshDwliPk","types":["administrative_area_level_2","political"]},{"address_components":[{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["locality","political"]},{"long_name":"Rio de Janeiro","short_name":"Rio de Janeiro","types":["administrative_area_level_2","political"]},{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"Rio de Janeiro, State of Rio de Janeiro, Brazil","geometry":{"bounds":{"northeast":{"lat":-22.7460327,"lng":-43.0969042},"southwest":{"lat":-23.0822288,"lng":-43.7950599}},"location":{"lat":-22.9068467,"lng":-43.1728965},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-22.7460327,"lng":-43.0969042},"southwest":{"lat":-23.0822288,"lng":-43.7950599}}},"place_id":"ChIJW6AIkVXemwARTtIvZ2xC3FA","types":["locality","political"]},{"address_components":[{"long_name":"State of Rio de Janeiro","short_name":"RJ","types":["administrative_area_level_1","political"]},{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"State of Rio de Janeiro, Brazil","geometry":{"bounds":{"northeast":{"lat":-20.7632054,"lng":-40.9568207},"southwest":{"lat":-23.3689318,"lng":-44.8893205}},"location":{"lat":-22.9098755,"lng":-43.2094971},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":-20.7632054,"lng":-40.9568207},"southwest":{"lat":-23.3689318,"lng":-44.8893205}}},"place_id":"ChIJw4riypQYmAAR0IMFwRrDSQM","types":["administrative_area_level_1","political"]},{"address_components":[{"long_name":"Brazil","short_name":"BR","types":["country","political"]}],"formatted_address":"Brazil","geometry":{"bounds":{"northeast":{"lat":5.2717863,"lng":-28.650543},"southwest":{"lat":-34.0891,"lng":-73.9828169}},"location":{"lat":-14.235004,"lng":-51.92528},"location_type":"APPROXIMATE","viewport":{"northeast":{"lat":5.2717863,"lng":-28.650543},"southwest":{"lat":-34.0891,"lng":-73.9828169}}},"place_id":"ChIJzyjM68dZnAARYz4p8gYVWik","types":["country","political"]}],"status":"OK"}

Answer 2

了解您的要求已通过 google api 回答完成，

但现在不是免费的，除了计费 google 帐户外，不能使用超过免费限制。

因此，如果您正在或任何使用 React-Native-Geocoder 的人，您可以像这样实现它：

var pos = {
  lat: 40.7809261,
  lng: -73.9637594
};

Geocoder.geocodePosition(pos).then(res => {
    alert(res[0].formattedAddress);
})
.catch(error => alert(error));

Answer 3

有 Location.reverseGeocodeAsync(location) 个 expo 应用程序。

Answer 4

如果使用世博会；

import * as Location from 'expo-location'

getAddress = async () => {
    let {status} = await Location.requestForegroundPermissionsAsync(); // Get the location permission from the user and extract the 'status' key from it.
    if(status !== 'granted') {

        alert('permission denied!');
        return;
    }
    let address = Location.reverseGeoCodeAsync({lat, lng});

}

此处有更多详细信息；

https://docs.expo.io/versions/latest/sdk/location/#locationreversegeocodeasynclocation

如何在 React Native Expo 中使用 google 反向地理编码？

How to use google reverse geocoding with react native Expo?

react-native

expo