0

我正在尝试通过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;
        }
      }
    }
  }

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

4

1 回答 1

0

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

我只需要替换 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);
  }

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

于 2021-01-10T13:18:32.033 回答