Google Maps API地点自动补全下拉显示城市却填充镇区问题求助

云原生阿岚

2026-7-10

Google Maps Places Autocomplete 城市字段填充异常解决方案

问题描述

使用Google Maps Places Autocomplete时，下拉选项会显示Cape May Court House、Long Valley这类用户熟悉的地点名称，但选中后通过locality字段填充城市输入框时，得到的却是Middle Township、Washington Township这类镇区名称——这些镇区地址无法被Shippo/UPS的物流集成识别为有效配送地址。这个问题不仅在我们的代码里出现，多个电商网站甚至Google官方示例页都存在，只有JCPenney网站没这个问题。

我们的代码基于官方示例，核心填充逻辑如下：

// 原代码中的城市填充逻辑
case "locality":{         
  $("#txtcity").val(component.long_name);
  break;
}

问题根源

美国部分地区的行政区划里，locality对应的是官方镇区（Township），而用户实际需要的、物流系统认可的常用城市/社区名称，通常存放在address_components的sublocality_level_1字段里。

修复方案

修改城市字段的填充逻辑，优先读取sublocality_level_1的值，只有当该字段不存在时才回退到locality。

修改后的`fillInAddress`函数片段

// 替换原有的locality处理代码
case "sublocality_level_1": {
  $("#txtcity").val(component.long_name);
  break;
}
case "locality":{         
  // 仅当sublocality_level_1未设置时才用locality
  if (!$("#txtcity").val()) {
    $("#txtcity").val(component.long_name);
  }
  break;
}

同理修改`fillInAddress2`函数中的城市填充逻辑

case "sublocality_level_1": {
  $("#txtscity").val(component.long_name);
  break;
}
case "locality":{         
  if (!$("#txtscity").val()) {
    $("#txtscity").val(component.long_name);
  }
  break;
}