谷歌地图API地理编码获取地址组件 [英] google maps API geocoding get address components

问题描述

我正在使用 google map API(地理编码)，我注意以下内容.如果我为"x"地址打印数组，它将打印大小为9的对象数组.该国家/地区在索引6中.如果我输入其他"y"地址，有时对象数组小于9，并且获得该国家的指数不再是6.我尝试使用不同的地址，因为其中一些地址的大小一致，其中9个地址一致，6个地址一致，7个一致，依此类推.我是否有一种确定的方式访问该国家/地区，而不必检查数组的大小并避免此问题?

I'm working with google map API(geocoding) and I noticed the following. If I print the array for "x" address, it prints an array of objects of size 9. where the country is in the index 6. If I enter some other "y" address, sometimes the array of objects is less than 9 and the index to get the country is not 6 anymore. I have tried with different addresses as some of them have the size consistent as 9 some of them at 6 some of them 7 and so on. Is there a set way for me to access the country without having to check the size of the array and avoid this issue?

我的代码

     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并访问始终是国家/地区的最后一个字，但是对于邮政编码和地址上的其他信息，顺序并不总是相同. 下面是我正在打印的对象数组的结构示例.

I figured I can use place.formatted_address and access the last word which is always the country, but for zipcode and some other information on the address the order is not always the same. Below is an example of the structure of the array of objects I'm printing.

我考虑过对数组进行过滤以查找包含单词country，zipcode等的类型的索引，并根据返回的索引获取国家或我想要检索的任何内容.我想知道是否有更简单的方法可以直接从google API地理编码中完成此操作.

I thought about filtering the array to find the index of types that contains the word country,zipcode, etc and based on the index returned get the country or whatever I want to retrieve. I wonder if there's an easier way to accomplish this straight from the google API geocode.

此问题如何从google maps api获取国家/地区?谈论有人输入地址.我的应用程序使用google自动完成功能.我以为API可以更聪明地处理未输入完整地址的人的缺失数据.另外，该问题的答案地址是我对我的问题的解释的一部分，我说我知道我可以过滤数组

This question How to get country from google maps api? talks about someone entering the address. My application uses google autocomplete. I thought the API was smarter to handle the missing data of people not entering a complete address. Also, the answer address in that question is part of my explanation of my question of me saying I knew I could filter the array

推荐答案

相关问题:您需要解析address_components数组的类型，以查找具有国家/地区类型的条目.

You need to parse through the address_components array's types, looking for the entry with a type of country.

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

<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地理编码获取地址组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！