如何通过Google Maps API Autocomplete限定指定城市的地点结果？

当然可以实现！Google Maps Places API的Autocomplete组件本身没有直接支持多城市筛选的参数，但你可以通过手动过滤预测结果的方式来达到需求，甚至有两种不同的实现思路，看你更侧重用户体验还是开发效率：

方法1：手动获取并过滤预测结果（推荐，用户体验更好） #

这种方法会在下拉列表展示前就过滤掉非目标城市的结果，让用户只能看到符合要求的选项。核心是用AutocompleteService代替原生Autocomplete控件，自己处理预测请求和结果渲染：

代码示例 #

// 初始化Autocomplete服务和DOM元素
const autocompleteService = new google.maps.places.AutocompleteService();
const input = document.getElementById('autocomplete-input');
const predictionsList = document.getElementById('predictions-dropdown');

// 监听输入框变化，触发预测请求
input.addEventListener('input', () => {
  const query = input.value.trim();
  if (!query) {
    predictionsList.innerHTML = '';
    return;
  }

  // 获取地点预测
  autocompleteService.getPlacePredictions({
    input: query,
    types: ['address', 'establishment'], // 限制结果类型为地址或商家
    componentRestrictions: { country: ['us', 'fr'] } // 先缩小国家范围，减少过滤量
  }, (predictions, status) => {
    if (status !== google.maps.places.PlacesServiceStatus.OK) {
      predictionsList.innerHTML = '';
      return;
    }

    // 定义允许的城市列表
    const allowedCities = ['Paris', 'New York'];
    // 过滤出包含目标城市的结果（忽略大小写）
    const filteredPredictions = predictions.filter(prediction => {
      const fullText = `${prediction.structured_formatting.main_text} ${prediction.structured_formatting.secondary_text}`.toLowerCase();
      return allowedCities.some(city => fullText.includes(city.toLowerCase()));
    });

    // 渲染过滤后的下拉选项
    predictionsList.innerHTML = filteredPredictions.map(pred => `
      <li class="prediction-item" data-place-id="${pred.place_id}">
        ${pred.description}
      </li>
    `).join('');

    // 给选项添加点击事件，获取完整地点信息
    document.querySelectorAll('.prediction-item').forEach(item => {
      item.addEventListener('click', () => {
        const placeId = item.dataset.place_id;
        const placesService = new google.maps.places.PlacesService(document.createElement('div'));
        
        placesService.getDetails({ placeId }, (place, status) => {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            input.value = place.formatted_address;
            predictionsList.innerHTML = '';
            // 这里可以添加你自己的业务逻辑，比如标记地图等
          }
        });
      });
    });
  });
});

关键说明 #

• 用AutocompleteService获取原始预测结果，再通过字符串匹配过滤出包含目标城市的条目
• 先通过componentRestrictions缩小国家范围，能减少需要过滤的结果数量，提升性能
• 匹配时转成小写，避免大小写敏感导致的遗漏

方法2：使用原生Autocomplete控件，选择后验证 #

如果你不想自己渲染下拉列表，可以用原生Autocomplete控件，然后在用户选择地点后验证是否属于目标城市：

代码示例 #

const input = document.getElementById('autocomplete-input');
const autocomplete = new google.maps.places.Autocomplete(input, {
  types: ['address', 'establishment'],
  componentRestrictions: { country: ['us', 'fr'] }
});

// 监听地点选择事件
autocomplete.addListener('place_changed', () => {
  const place = autocomplete.getPlace();
  const allowedCities = ['Paris', 'New York'];
  
  // 从地点的地址组件中提取城市名称
  const selectedCity = place.address_components.find(component => 
    component.types.includes('locality') || component.types.includes('administrative_area_level_1')
  )?.long_name;

  // 验证是否符合要求
  if (!allowedCities.includes(selectedCity)) {
    alert('请选择巴黎或纽约的地点');
    input.value = '';
    return;
  }

  // 处理符合条件的地点
  console.log('选中的有效地点:', place);
});

优缺点 #

• 优点：代码更简洁，直接用原生控件的UI，无需自己处理下拉渲染
• 缺点：用户可能先看到非目标城市的结果，选择后才被提示不符合，体验不如方法1

注意事项 #

1. 城市名称的匹配要灵活：有些地点的描述里可能用城市的别名（比如New York可能显示为NYC），如果需要覆盖这种情况，可以把别名也加入allowedCities列表
2. 地址组件的类型：不同地区的地址组件类型可能有差异，比如纽约的城市对应locality，而某些地区可能用administrative_area_level_1，所以判断时要兼顾多种类型

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