javascript - 如何使用 Google Maps API 从 Places 中获取一致的 City、State 和 Country 值？

Question

期望的行为

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

实际行为

似乎每个数组Place中可能有不同数量的值address_components，因此无法通过数组中的位置直接引用 City、State 和 Country。

问题

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

我开始创建一个嵌套循环来检查数组值types中的address_components值，但感觉工作量太大，而且数组中的值似乎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

作为 4 个值的数组返回address_components- 国家作为第 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

以 3 个值的数组形式返回address_components- 国家作为第三个值包含在内：

[
  {
    "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

以 5 个值的数组形式返回address_components- 国家作为第 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"
    ]
  }
]

标签： javascriptjquerygoogle-maps-api-3

Answer 1

正如在原始帖子中所评论的那样，似乎还有其他问题可以解决这个问题。

如果它对其他人有帮助，那么熟悉这里的内容对我很有帮助：

地址类型和地址组件类型

该链接不仅列出了不同的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);

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

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