如何通过Google Maps API实现特定城市的城镇名自动补全？

嘿，这需求不难搞定！你只需要监听第一个城市选择框的变化，然后动态更新Google Maps Autocomplete的限制条件，把选中的城市加入过滤规则，同时指定返回结果的类型，确保只出现城镇名称就行。

下面是调整后的完整代码，我假设你的城市选择框id是city-select，你可以根据实际情况修改：

// 先声明全局的Autocomplete实例，方便后续更新配置
let autocomplete;

// 初始化Autocomplete，先设置国家限制和结果类型
function initAutocomplete() {
  const initialOptions = {
    componentRestrictions: { country: "pk" },
    types: ['sublocality'] // 只返回城镇/次级区域类型的地点
  };
  const locationInput = document.getElementById('location-search');
  autocomplete = new google.maps.places.Autocomplete(locationInput, initialOptions);
}

// 监听城市选择框的变化事件
document.getElementById('city-select').addEventListener('change', function() {
  const selectedCity = this.value;
  
  if (selectedCity) {
    // 当选中城市后，更新Autocomplete的限制条件，添加城市过滤
    autocomplete.setOptions({
      componentRestrictions: {
        country: "pk",
        administrativeArea: selectedCity // 用选中的城市作为行政区域限制
      }
    });
  } else {
    // 如果没选城市，恢复只限制国家
    autocomplete.setOptions({
      componentRestrictions: { country: "pk" }
    });
  }
});

// 页面加载完成后初始化Autocomplete
window.addEventListener('load', initAutocomplete);

关键说明： #

• types: ['sublocality']：这个参数会告诉Autocomplete只返回「次级行政区域」，也就是城镇、街区这类层级的地点，避免出现商家、景点等无关结果。
• administrativeArea：在componentRestrictions里添加这个字段，指定选中的城市名称，Google Maps就会自动过滤出该城市范围内的城镇。
• 动态更新配置：通过监听选择框的change事件，每次切换城市时都更新Autocomplete的规则，确保自动补全的范围始终和选中的城市匹配。

需要注意的是，你的城市选择框里的选项值要使用Google Maps认可的标准城市名称（比如“Lahore”、“Karachi”），这样administrativeArea的过滤才能准确生效哦！

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