如何配置Google Autocomplete仅在输入街道及门牌号后显示建议？

核心实现思路 #

通过两个关键步骤限制自动补全触发条件：

1. 锁定德国地区并限定补全类型为完整地址
2. 监听输入内容，仅当输入包含数字（门牌号核心特征）时启用地址补全；同时过滤掉不含门牌号的预测结果

完整代码修改示例 #

// 获取地址输入框
const addressInput = document.getElementById('address-input');

// 初始化Autocomplete，锁定德国地区
const autocomplete = new google.maps.places.Autocomplete(addressInput, {
  componentRestrictions: { country: 'de' },
  types: ['address'], // 仅显示完整地址类型
  fields: ['address_components', 'formatted_address']
});

// 监听输入内容，动态控制补全开关
addressInput.addEventListener('input', function() {
  const inputValue = this.value.trim();
  // 检查输入是否包含数字（德国门牌号通常含数字，带后缀字母的情况如12a也能匹配）
  const hasHouseNumber = /\d/.test(inputValue);

  if (!hasHouseNumber) {
    // 无数字时切换类型，临时禁用地址补全建议
    autocomplete.setOptions({ types: ['establishment'] });
  } else {
    // 有数字时恢复地址补全配置
    autocomplete.setOptions({
      types: ['address'],
      componentRestrictions: { country: 'de' }
    });
  }
});

// 过滤预测结果，确保仅显示含门牌号的地址
google.maps.event.addListener(autocomplete, 'predictions', function(predictions) {
  const filtered = predictions.filter(pred => /\d/.test(pred.description));
  const pacContainer = document.querySelector('.pac-container');
  
  // 无符合条件的结果时隐藏下拉框
  if (filtered.length === 0 && pacContainer) {
    pacContainer.style.display = 'none';
  }
});

// 选择地址后填充对应输入框
autocomplete.addListener('place_changed', function() {
  const place = autocomplete.getPlace();
  let street = '', houseNumber = '', postalCode = '', city = '';

  // 解析地址组件
  place.address_components.forEach(comp => {
    if (comp.types.includes('route')) street = comp.long_name;
    if (comp.types.includes('street_number')) houseNumber = comp.long_name;
    if (comp.types.includes('postal_code')) postalCode = comp.long_name;
    if (comp.types.includes('locality')) city = comp.long_name;
  });

  // 填充到对应字段
  document.getElementById('street').value = street;
  document.getElementById('house-number').value = houseNumber;
  document.getElementById('postal-code').value = postalCode;
  document.getElementById('city').value = city;
});

关键细节说明 #

• 正则/\d/能覆盖德国绝大多数门牌号场景，包括带后缀字母的情况（如Musterstraße 12a）
• 切换types的方式属于Google API规范内操作，不会触发额外限制
• 若需要更精准的门牌号判断，可结合Google Places Details API解析预测结果的address_components，但会增加API调用次数，需权衡成本

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