如何让Google Places Autocomplete输入框显示邮政编码

你当前使用Google Places Autocomplete时，默认地址显示格式未将邮政编码放在州和国家之间——比如输入“576 ballman rd”后，输入框显示576 Ballman Rd, Reynoldsburg, OH, USA，而你需要的格式是576 Ballman Rd, Reynoldsburg, OH,43068 USA。

问题核心在于：Google Places Autocomplete的默认显示是固定格式，若要自定义地址拼接逻辑，必须监听place_changed事件，手动解析返回的address_components字段，再按需求重新组装输入框内容。

具体修改步骤 #

1. 给Autocomplete实例添加place_changed事件监听，触发时机为用户选中某个地址选项时。
2. 在事件回调中，从选中地点的address_components里提取所需字段：
   • 街道地址（street_number + route）
   • 城市（locality）
   • 州（administrative_area_level_1）
   • 邮政编码（postal_code）
   • 国家（country）
3. 按目标格式拼接字段，再赋值给输入框。

修改后的完整代码 #

<!doctype html>
<html lang="en">

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script>
    function initMap() {
      const autocompleteInput = document.getElementById('location');

      const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
        fields: ["address_components"],
        types: ["address"],
      });

      // 监听地址选中事件
      autocomplete.addListener('place_changed', function() {
        const place = autocomplete.getPlace();
        let street = '';
        let city = '';
        let state = '';
        let zip = '';
        let country = '';

        // 遍历address_components提取对应字段
        place.address_components.forEach(component => {
          if (component.types.includes('street_number')) {
            street = component.long_name + ' ';
          }
          if (component.types.includes('route')) {
            street += component.long_name;
          }
          if (component.types.includes('locality')) {
            city = component.long_name;
          }
          if (component.types.includes('administrative_area_level_1')) {
            state = component.short_name;
          }
          if (component.types.includes('postal_code')) {
            zip = component.long_name;
          }
          if (component.types.includes('country')) {
            country = component.long_name;
          }
        });

        // 按自定义格式拼接地址
        const formattedAddress = `${street}, ${city}, ${state},${zip} ${country}`;
        // 更新输入框内容
        autocompleteInput.value = formattedAddress;
      });
    }
  </script>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>make zip code show</title>
</head>

<body>
  <script>
    window.onload = initMap;
  </script>

  <div class="mb-3">
    <input type="text" class="form-control" id="location" name="address" size='50'>
    <br>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&channel=GMPSB_addressselection_v1_cAB" async defer></script>
</div>
</body>
</html>

关键说明 #

• 你之前的配置块{fields: ["address_components"], types: ["address"]}是正确的：它明确指定了需要返回address_components字段，方便我们提取地址各部分；移除后Google会返回默认字段，功能仍能运行，但保留配置可以减少不必要的数据传输，提升效率。
• 遍历address_components时，通过types属性判断组件对应的地址类型，确保字段提取准确。
• 拼接地址时严格按照你需要的格式街道, 城市, 州,邮编 国家组装，最终覆盖输入框的默认显示内容。

内容的提问来源于stack exchange，提问作者asdfgedddd