如何使用 Google 地图 API 从地点获得一致的城市、州和国家/地区值？

Question

期望的行为

能够在从自动完成搜索框结果中选择地点后检索城市、州（地区）和国家/地区值。

实际行为

似乎每个 Place 在其 address_components 数组中可能有不同数量的值，因此无法通过数组中的位置直接引用城市、州和国家/地区。

问题

是否有既定惯例可以轻松地从 Places 获取一致的城市、州和国家/地区值？

我开始创建一个嵌套循环来检查 address_components 数组值中的 types 值，但感觉工作量太大，而且似乎 types 数组不需要是唯一的，例如 type > political 可以在 address_components 数组中出现多次。

我试过的

相关代码

<script src="https://maps.googleapis.com/maps/api/js?key=********&libraries=places"></script>


// restrict search results to the 'cities' type
// see:  https://developers.google.com/places/supported_types?csw=1#table3
var options = {
    types: ['(cities)']
};

// create autocomplete
const autocomplete = new google.maps.places.Autocomplete(input, options);

// do stuff when selecting a search result
autocomplete.addListener("place_changed", () => {

const place = autocomplete.getPlace();

console.log("here is the place!");
console.log(place);

});

我以为我可以获得这样的城市、州（地区）和国家/地区值：

var place_city = place.name;
var place_region = place.address_components[1].long_name;
var place_country = place.address_components[2].short_name;

但是，下面的示例表明地点可能具有 address_components 结构不同的属性：

搜索词：Townsville QLD, Australia

Returns address_components 作为 4 个值的数组 - 国家/地区作为第 4 个值包含在内：

[
  {
    "long_name": "Townsville",
    "short_name": "Townsville",
    "types": [
      "colloquial_area",
      "locality",
      "political"
    ]
  },
  {
    "long_name": "Townsville City",
    "short_name": "Townsville",
    "types": [
      "administrative_area_level_2",
      "political"
    ]
  },
  {
    "long_name": "Queensland",
    "short_name": "QLD",
    "types": [
      "administrative_area_level_1",
      "political"
    ]
  },
  {
    "long_name": "Australia",
    "short_name": "AU",
    "types": [
      "country",
      "political"
    ]
  }
]

搜索词：Brisbane QLD, Australia

Returns address_components 作为 3 个值的数组 - 国家/地区作为第 3 个值包含在内：

[
  {
    "long_name": "Brisbane",
    "short_name": "Brisbane",
    "types": [
      "colloquial_area",
      "locality",
      "political"
    ]
  },
  {
    "long_name": "Queensland",
    "short_name": "QLD",
    "types": [
      "administrative_area_level_1",
      "political"
    ]
  },
  {
    "long_name": "Australia",
    "short_name": "AU",
    "types": [
      "country",
      "political"
    ]
  }
]

搜索词：Acton Park TAS, Australia

Returns address_components 作为 5 个值的数组 - 国家/地区作为第 4 个值包含在内：

[
  {
    "long_name": "Acton Park",
    "short_name": "Acton Park",
    "types": [
      "locality",
      "political"
    ]
  },
  {
    "long_name": "Clarence City Council",
    "short_name": "Clarence City",
    "types": [
      "administrative_area_level_2",
      "political"
    ]
  },
  {
    "long_name": "Tasmania",
    "short_name": "TAS",
    "types": [
      "administrative_area_level_1",
      "political"
    ]
  },
  {
    "long_name": "Australia",
    "short_name": "AU",
    "types": [
      "country",
      "political"
    ]
  },
  {
    "long_name": "7170",
    "short_name": "7170",
    "types": [
      "postal_code"
    ]
  }
]

Answer 1

似乎还有其他问题可以解决这个问题，正如对原始 post 的评论一样。

为了帮助其他人，熟悉这里的内容对我很有帮助：

Address types and address component types

link 不仅列出了不同的 types，而且还解释了每个的含义。

在我的情况下，我得出了我主要对这些类型感兴趣的结论，希望是正确的：

地区（“城市”）
administrative_area_level_1（“州”）
国家（“国家”）

我对新手友好的嵌套循环的初稿是：

var city = "";
var state = "";
var country = "";

$.each(my_place, function(index_1, value_1) {

    var types = value_1.types;

    $.each(types, function(index_2, value_2) {
        if (value_2 === "locality") {
            city = my_place[index_1]['long_name'];
        } else if (value_2 === "administrative_area_level_1") {
            state = my_place[index_1]['long_name'];
        } else if (value_2 === "country") {
            country = my_place[index_1]['short_name'];
        }
    });

});

console.log("city: " + city);
console.log("state: " + state);
console.log("country: " + country);

在 OP 中的每个 address_components 数组上测试它时似乎有效。

正如评论中所指出的，似乎有更复杂的解决方案 here and 。

如何使用 Google 地图 API 从地点获得一致的城市、州和国家/地区值？

How to get consistent City, State and Country values from Places with Google Maps API?

javascript

jquery

google-maps-api-3