Google Reverse Geocode API-不返回一致的数据

Question

I am developing an app in React Native JS and I am using Googles reverse geocode API to find the city, state, county, country, & zip code ( must include county, state, and country ) of a user. My problem is that I can not figure out a consistent way to gather the data because Google returns a JSON file with different order each time depending on the location.

My code for now is:

fetch(`https://maps.googleapis.com/maps/api/geocode/json?${qs}`).then((res) => res.json()).then((json) => {
             //success!
   var city=false,state=false,county=false,country=false,zip=false;
   for (var i = 0; i < json.results.length; i++) {
     if ((!city || !state) && json.results[i].types[0] === "locality") {
       city = json.results[i].address_components[0].short_name,
       state = json.results[i].address_components[2].short_name;
     } else if (!county && json.results[i].types[0] === "administrative_area_level_2") {
       county = json.results[i].address_components[0].short_name;
     } else if (!state && json.results[i].types[0] === "administrative_area_level_1") {
       state = json.results[i].address_components[0].short_name;
     } else if (!county && json.results[i].types[0] === "county") {
       county = json.results[i].address_components[0].short_name;
     } else if (!country && json.results[i].types[0] === "country") {
       country = json.results[i].address_components[0].short_name;
     }

  }

${qs} being the latlng and key at the end of the URL.
I am trying to go through the results and was picking out different types, but this still does not work. I also want to get this to work in all of North America..

All feedback is greatly appreciated!!! Thank you!

Answer 1

Well I couldn't figure it out in the end. I ended up switching to https://locationiq.org/ API and it does exactly what I was trying to.

Answer 2

You can do something like this:

 _geoCodeCallback = (results, status, event) => {
    const google = window.google; // eslint-disable-line
   if (status === google.maps.GeocoderStatus.OK) {
    if (results[0]) {
      const add = results[0].formatted_address;
      const value = add.split(",");
      const count = value.length;
      const city = value[count - 3];
      // here we can dispatch action to search by city name and autofill the autocomplete
    } else {
      console.log("address not found");
    }
    } else {
      console.log(status);
    }
  }

  _geocodeAddress = (geocoder, latlng) => {
    geocoder.geocode({ location: latlng }, this._geoCodeCallback);
  }

    if (navigator.geolocation) {
     this._displayLocation = (latitude, longitude) => {
      const geocoder = new google.maps.Geocoder();
      const latlng = new google.maps.LatLng(latitude, longitude);
      this._geocodeAddress(geocoder, latlng);
    };

For entire implementation of fetching city and other details using google reverse geo coding in react refer to

https://medium.com/@eesh.t/auto-detect-location-react-component-using-google-geocoding-and-reverse-geocoding-in-autocomplete-66a269c59315