仅在谷歌地址自动完成时建议完整地址答案

【问题标题】：Suggest full address only on google address autocomplete仅在谷歌地址自动完成时建议完整地址
【发布时间】：2021-04-12 22:01:52
【问题描述】：

我正在尝试通过 js 实现谷歌地址自动完成功能。我的实现如下所示。它工作正常，唯一的问题是在搜索地址时，它也建议没有邮政编码的通用地址。我的系统需要的是带有邮政编码的完整地址。见截图https://prnt.sc/wi228m。下面是我目前的实现

 // google map and address
  var autocomplete;
  const componentForm = {
    street_number: "short_name",
    route: "long_name",
    locality: "long_name",
    administrative_area_level_1: "short_name",
    country: "long_name",
    postal_code: "short_name",
  };
  
  function googleMapInit() {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("searchAddressList"),
      { types: ["geocode"] }
    );
    
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
  }

  google.maps.event.addDomListener(window, 'load', googleMapInit);
  
  function fillInAddress() {
    $('#country').val('');
    $('#zip').val('');
    $('#province').val('');
    $('#city').val('');
    $('#address').val('');

    const place = autocomplete.getPlace()

    for (const component of place.address_components) {
      const addressType = component.types[0];
      if (componentForm[addressType]) {
        const val = component[componentForm[addressType]];

        switch(addressType) {
          case 'country':
            $('#country').val(val)
            break;
          case 'postal_code':
            $('#zip').val(val)
            break;
          case 'administrative_area_level_1':
            $('#province').val(val)
            break;
          case 'locality':
            $('#city').val(val)
            break;
          case 'route':
            $('#address').val(val)
            break;
        }
      }
    }
  }

有人可以建议如何只显示完整地址吗？

【问题讨论】：

根据docs，你有一个错字：address_component 应该是address_components，你可能想试试formatted_address 之类的其他东西。也就是说，我怀疑悉尼只有 1 个邮政编码，所以只输入“悉尼”不会返回邮政编码是有道理的。

标签： javascript google-maps autocomplete google-maps-autocomplete

【解决方案1】：

我找到了解决方案并在这里分享，以便它也可以帮助其他人。

我只需要替换 googleMapInit() 方法的参数。

见下面的代码：

function googleMapInit() {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById("searchAddressList"),
      { types: ["address"],componentRestrictions: {country: 'us'} }
    );
    
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
  }

注意“类型”字段，其参数已更改。这会给你完整的地址。我又添加了一个参数来限制仅美国的搜索结果。

【讨论】：