如何去除Google Places Autocomplete结果中的国家名称？

嘿，这个问题我之前也碰到过！默认的Autocomplete会返回完整的格式化地址，包含国家后缀，不过我们可以通过监听事件、手动处理地址组件来实现你想要的效果。

解决方案思路 #

Google Places API返回的place对象里包含了详细的address_components数组，每个组件都有对应的类型标签（比如城市、州、国家）。我们只需要筛选出locality（城市）和administrative_area_level_1（美国的州）这两个组件，再把它们组合起来替换输入框内容就行。

修改后的完整代码 #

// 保留你原有Autocomplete初始化配置
var options = { 
  types: ['(cities)'], 
  componentRestrictions: {country: "us"} 
}; 
var autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('autocomplete'), 
  options
);

// 监听地点选择事件，处理结果
autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  var city = '';
  var state = '';

  // 遍历地址组件，提取城市和州信息
  for (var i = 0; i < place.address_components.length; i++) {
    var component = place.address_components[i];
    if (component.types.includes('locality')) {
      city = component.long_name; // 若要城市缩写可换成short_name（多数城市两者一致）
    } else if (component.types.includes('administrative_area_level_1')) {
      state = component.short_name; // 用short_name获取州的缩写，比如TX
    }
  }

  // 组合并设置输入框的值
  if (city && state) {
    document.getElementById('autocomplete').value = `${city} ${state}`;
  } else if (city) {
    // 极端情况：如果没有州信息，仅显示城市
    document.getElementById('autocomplete').value = city;
  }
});

代码细节说明 #

• place_changed事件：当用户从下拉建议列表中选中一个地点时触发。
• address_components：这个数组拆分了地点的各个地址部分，每个部分的types属性用来标识其类型（比如城市、州）。
• 针对美国地区，administrative_area_level_1对应的就是州，用short_name可以获取州的缩写（比如TX），如果需要完整州名，换成long_name即可（比如Texas）。

这样设置后，当用户选择"Austin TX, USA"这类结果时，输入框会自动更新为"Austin TX"，完美去掉国家后缀！

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