react-native-geocoding 中的地理编码问题答案

【问题标题】：Geocoding issue in react-native-geocodingreact-native-geocoding 中的地理编码问题
【发布时间】：2021-02-10 12:21:33
【问题描述】：

Error Image 我正在尝试从反应原生的纬度和经度值中获取地址（反向地理编码）。但是出现上述错误。

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

和

Geocoder.from(41.89, 12.49)
            .catch(error => console.log(error))
            .then(json => {
                console.log("json",json);
                var addressComponent = json.results[0].address_components[0];
                console.log("addressComponent",addressComponent);
            });

属于 react-native-geocoding 给出错误

enter image description here

【问题讨论】：

请以文字而非图片的形式提供错误信息:)

标签： android react-native reverse-geocoding react-native-maps

【解决方案1】：

你是如何在你的代码中使用这些代码 sn-ps 的？

我试着检查一下，它工作正常。

这是一个 sample code 和下面的代码 sn-p 用于获取：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

class MapApp extends Component {
  componentDidMount = () => {
    fetch(
      'https://maps.googleapis.com/maps/api/geocode/json?address=' +
        41.89 +
        ',' +
        12.49 +
        '&key=' +
        'YOUR_KEY'
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(
          'ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson)
        );
      })
      .catch((error) => console.log(error));
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
        </MapView>
      </View>
    );
  }
}

export default MapApp;

这里是 sample code 和 react-native-geocoding 的代码 sn-p：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

class MapApp extends Component {
  componentDidMount = () => {
    fetch(
      'https://maps.googleapis.com/maps/api/geocode/json?address=' +
        41.89 +
        ',' +
        12.49 +
        '&key=' +
        'YOUR_KEY'
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(
          'ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson)
        );
      })
      .catch((error) => console.log(error));
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
        </MapView>
      </View>
    );
  }
}

export default MapApp;

【讨论】：