仅在 google 地址自动完成时建议完整地址

Question

我正在尝试通过 js 实现 google 地址自动完成功能。我的实现如下所示。它工作正常，唯一的问题是在搜索地址时，它也建议没有邮政编码的通用地址。我的系统需要的是带邮政编码的完整地址。请参阅屏幕截图 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;
        }
      }
    }
  }

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

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

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

仅在 google 地址自动完成时建议完整地址

Suggest full address only on google address autocomplete

javascript

google-maps

autocomplete

google-maps-autocomplete