Google Places API Autocomplete 添加第二个地址回填异常问题咨询

问题原因 #

你代码里存在3个核心错误导致第二个地址无法正确回填：

1. 第二个地址的componentForm数组未更新字段后缀：initMapAddress2里的componentForm还是沿用第一个实例的不带2后缀的字段名，循环赋值时仍然会查找第一个地址的DOM节点。
2. 地址组件类型匹配逻辑错误：Google Places API返回的地址组件类型是固定原生值（比如street_number/route），你第二个实例的addressNameFormat把key改成了带2的后缀，用这个值去匹配API返回的组件类型永远匹配不到，拿不到地址数据。
3. 重复加载Google Maps SDK：你加载了两次谷歌地图SDK，无需重复加载，单次加载完成后可以同时初始化两个自动完成实例。

修复后代码 #

第一步：修改JS逻辑，合并初始化避免重复代码 #

// 通用地址自动完成初始化工具函数
function initAutocomplete(inputId, fieldSuffix) {
  const componentForm = [
    'street_number',
    'route',
    'locality',
    'administrative_area_level_2',
    'postal_code',
  ];
  const autocompleteInput = document.getElementById(inputId);
  const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
    types: ['(cities)'],
    componentRestrictions: { country: 'gb' }
  });

  autocomplete.addListener('place_changed', function () {
    const place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert('No details available for input: \'' + place.name + '\'');
      return;
    }
    fillInAddress(place, inputId, fieldSuffix);
  });

  function fillInAddress(place, inputId, fieldSuffix) {
    const addressNameFormat = {
      'street_number': 'short_name',
      'route': 'long_name',
      'locality': 'long_name',
      'administrative_area_level_2': 'short_name',
      'postal_code': 'short_name',
    };
    const getAddressComp = function (type) {
      for (const component of place.address_components) {
        if (component.types[0] === type) {
          return component[addressNameFormat[type]];
        }
      }
      return '';
    };
    // 回填搜索框
    document.getElementById(inputId).value = getAddressComp('street_number') + ' ' + getAddressComp('route');
    // 拼接后缀匹配对应DOM回填其余字段
    for (const component of componentForm) {
      document.getElementById(component + fieldSuffix).value = getAddressComp(component);
    }
  }
}

// SDK加载完成后统一初始化两个实例
function initAllMaps() {
  initAutocomplete('location', ''); // 第一个地址字段无后缀
  initAutocomplete('location2', '2'); // 第二个地址字段后缀为2
}

第二步：修改SDK加载逻辑，删除重复加载的标签 #

<!-- 仅保留一次SDK加载，回调指向统一初始化函数 -->
<script src="https://maps.googleapis.com/maps/api/js?key=****************Zv_k&libraries=places&callback=initAllMaps&channel=GMPSB_addressselection_v1_cA" async defer></script>

<!-- 原有HTML表单结构无需修改 -->
<div class="card-container">
  <div class="panel">
    <div>
      <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt="">
      <span class="sb-title">Correspondence Address</span>
    </div>
    <input type="text" placeholder="Search Address" id="location" />
    <input type="text" placeholder="" id="street_number" />
    <input type="text" placeholder="" id="route" />
    <input type="text" placeholder="" id="locality" />
    <div class="half-input-container">
      <input type="text" class="half-input" placeholder="" id="administrative_area_level_2" />
      <input type="text" class="half-input" placeholder="" id="postal_code" />
    </div>
  </div>
</div>
<div class="card-container">
  <div class="panel">
    <div>
      <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt="">
      <span class="sb-title">Location Address</span>
    </div>
    <input type="text" placeholder="Search Address" id="location2" />
    <input type="text" placeholder="" id="street_number2" />
    <input type="text" placeholder="" id="route2" />
    <input type="text" placeholder="" id="locality2" />
    <div class="half-input-container">
      <input type="text" class="half-input" placeholder="" id="administrative_area_level_22" />
      <input type="text" class="half-input" placeholder="" id="postal_code2" />
    </div>
  </div>
</div>

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