Question

我正在使用google map API(geocoding)，我注意到以下内容。如果我打印“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并访问始终是国家/地区的最后一个字，但是对于邮政编码和地址上的其他一些信息，订单并不总是相同的。下面是我正在打印的对象数组的结构示例。

我想过滤数组以查找包含单词country，zipcode等的类型的索引，并根据返回的索引获取国家或我想要检索的任何内容。我想知道是否有一种更简单的方法可以直接从谷歌API地理编码中完成。

这个问题How to get country from google maps api?谈到有人进入该地址。我的应用程序使用谷歌自动完成功能。我认为API更聪明地处理没有输入完整地址的人的缺失数据。此外，该问题的答案地址是我对我的问题的解释的一部分，我说我知道我可以过滤数组

Answer 1

相关问题：Wrong country code returned by 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 +")";

proof of concept fiddle

代码段

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;
}

<div class="pac-card" id="pac-card">
  <div>
    <div id="type-selector" class="pac-controls">
    </div>
    <div id="pac-container">
      <input id="pac-input" type="text" placeholder="Enter a location">
    </div>
  </div>
</div>
<div id="country"></div>
<div id="map"></div>
<div id="infowindow-content">
  <img src="" width="16" height="16" id="place-icon">
  <span id="place-name" class="title"></span><br>
  <span id="place-address"></span>
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

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

1 个答案: