谷歌地图API地理编码获取地址组件

Question

我正在使用谷歌地图 API（地理编码），我注意到以下内容。如果我打印“x”地址的数组，它会打印一个大小为 9 的对象数组。其中国家/地区位于索引 6 中。如果我输入其他“y”地址，有时对象数组小于 9 并且获得国家的指数不再是6了。我尝试过使用不同的地址，因为其中一些地址的大小一致为 9，其中一些为 6，另一些为 7，等等。有没有一种固定的方法可以让我访问该国家/地区而无需检查数组的大小并避免此问题？

我的代码

     let place: google.maps.places.PlaceResult = autocomplete.getPlace();
     this.addressArray = place.address_components;
     if(this.addressArray.length === 9) {
        this.country = this.addressArray[6].short_name;
        this.zipcode = this.addressArray[7].short_name;
     } else {
        this.country = this.addressArray[5].short_name;
        this.zipcode = this.addressArray[6].short_name;
     }

我想我可以使用place.formatted_address和访问最后一个单词，它始终是国家/地区，但对于邮政编码和地址上的其他一些信息，顺序并不总是相同。下面是我正在打印的对象数组的结构示例。

我考虑过过滤数组以查找包含单词国家/地区、邮政编码等的类型的索引，并根据返回的索引获取国家/地区或我想要检索的任何内容。我想知道是否有一种更简单的方法可以直接从 google API 地理编码来完成此操作。

这个问题如何从谷歌地图API获取国家/地区？谈论有人输入地址。我的应用程序使用谷歌自动完成功能。我认为 API 可以更智能地处理人们未输入完整地址而丢失的数据。另外，该问题中的答案地址是我对我的问题的解释的一部分，我说我知道我可以过滤数组

Answer 1

相关问题：Google Geocoder 返回错误的国家/地区代码

您需要解析 address_components 数组的类型，查找具有国家/地区类型的条目。

var country = '';
for (var i = 0; i < place.address_components.length; i++) {
  for (var j = 0; j < place.address_components[i].types.length; j++) {
    if (place.address_components[i].types[j] == "country") {
      country = place.address_components[i];
    }
  }
}
document.getElementById("country").innerHTML = country.long_name +" (" + country.short_name +")";

概念证明小提琴

代码片段：

var country = '';
for (var i = 0; i < place.address_components.length; i++) {
  for (var j = 0; j < place.address_components[i].types.length; j++) {
    if (place.address_components[i].types[j] == "country") {
      country = place.address_components[i];
    }
  }
}
document.getElementById("country").innerHTML = country.long_name +" (" + country.short_name +")";

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });
  var input = document.getElementById('pac-input');
  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17); // Why 17? Because it looks good.
    }
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    var country = '';
    for (var i = 0; i < place.address_components.length; i++) {
      for (var j = 0; j < place.address_components[i].types.length; j++) {
        if (place.address_components[i].types[j] == "country") {
          country = place.address_components[i];
        }
      }
    }
    document.getElementById("country").innerHTML = country.long_name + " (" + country.short_name + ")";
    infowindowContent.children['place-icon'].src = place.icon;
    infowindowContent.children['place-name'].textContent = place.name;
    infowindowContent.children['place-address'].textContent = country.long_name;
    infowindow.open(map, marker);
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}