如何基于第一个输入框的place_id限制Autocomplete结果范围

我来帮你搞定这个需求！你想要的是第一个地址输入框选中区域后，第二个输入框只在该区域内提供地址建议，对吧？咱们先看看你现有代码里的小问题，再给出修正方案：

原代码的几个问题 #

• 每次第一个输入框触发place_changed事件时，都重新实例化第二个Autocomplete，这不仅没必要，还可能导致重复绑定或异常行为
• 没有正确利用第一个地点的地理边界来限制第二个输入框的搜索范围，strictbounds需要配合bounds参数才能生效，单纯设置radius或者想直接用place_id是不行的

修正后的实现方案 #

我们可以先初始化两个Autocomplete实例，然后在第一个输入框的place_changed事件中，把选中地点的地理边界赋值给第二个Autocomplete，同时开启严格边界限制。如果第一个输入框清空，还可以恢复第二个输入框的默认设置。

// 初始化第一个输入框的Autocomplete
const options1 = { 
  types: ['(regions)'], 
  componentRestrictions: { country: 'gb' } 
};
const autocomplete1 = new google.maps.places.Autocomplete(
  $("#address_1")[0], 
  options1
);

// 初始化第二个输入框的Autocomplete（先设置基础配置）
const options2 = { 
  types: ['address'], 
  componentRestrictions: { country: 'gb' },
  strictbounds: false // 初始不开启严格边界
};
const autocomplete2 = new google.maps.places.Autocomplete(
  $("#address_2")[0], 
  options2
);

// 监听第一个输入框的地点变更事件
google.maps.event.addListener(autocomplete1, 'place_changed', function () {
  const selectedPlace = autocomplete1.getPlace();
  
  if (selectedPlace.geometry && selectedPlace.geometry.bounds) {
    // 如果选中的地点有明确的地理边界，设置给第二个Autocomplete
    autocomplete2.setBounds(selectedPlace.geometry.bounds);
    autocomplete2.setOptions({ strictbounds: true });
  } else if (selectedPlace.geometry && selectedPlace.geometry.location) {
    // 如果地点没有明确边界（比如小区域），则基于中心点创建一个边界范围
    const radius = 5000; // 可根据需求调整半径（单位：米）
    const bounds = new google.maps.Circle({
      center: selectedPlace.geometry.location,
      radius: radius
    }).getBounds();
    
    autocomplete2.setBounds(bounds);
    autocomplete2.setOptions({ strictbounds: true });
  } else {
    // 如果第一个输入框清空或没有选中有效地点，恢复第二个输入框的默认设置
    autocomplete2.setOptions({ 
      strictbounds: false,
      bounds: null
    });
  }
});

关键说明 #

• bounds参数：这是限制Autocomplete搜索范围的核心，它接受一个google.maps.LatLngBounds对象，Google Places API会只返回该边界内的地址建议
• strictbounds: true：开启后，Autocomplete会严格限制在设定的边界内返回结果，不会出现超出范围的建议
• 边界 fallback：有些地点可能没有自带的bounds属性（比如小村镇），这时候我们可以基于地点的中心点，用指定半径创建一个圆形边界，再转换为矩形边界来使用

这样调整后，当你在第一个输入框选中伦敦时，第二个输入框就只会推荐伦敦范围内的地址啦！

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