Google Map自定义自动补全如何限制为单个国家（如美/加）

问题原因 #

你的代码中只有autocomplete_postalcode实例设置了法国的区域限制，但第一个autocomplete实例（对应id="autocomplete"的输入框）没有配置componentRestrictions参数，所以它依然会返回全球范围的搜索结果。

修改方案 #

要让指定输入框仅支持单个国家（比如美国或加拿大），需要给对应的Autocomplete实例添加componentRestrictions配置，同时确保使用正确的两位ISO 3166-1 Alpha-2国家代码：

示例：限制单个输入框为美国（US）或加拿大（CA） #

function initialize() {
  // 给第一个输入框添加美国区域限制
  autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
    { 
      types: ['geocode'],
      componentRestrictions: {country: 'us'} // 添加国家限制
    } 
  );
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
  
  // 修改第二个输入框为加拿大区域限制
  autocomplete_postalcode = new google.maps.places.Autocomplete(
    document.getElementById("AutocompletePostalCode"), 
    { 
      types: ['(regions)'],
      componentRestrictions: {country: 'ca'} // 替换为加拿大国家代码
    }
  );
}

关键注意事项 #

• 国家代码必须是两位小写或大写的ISO 3166-1 Alpha-2格式，比如美国为us、加拿大为ca、法国为fr。
• 如果需要多个输入框都限制在同一国家，只需给每个new google.maps.places.Autocomplete()的配置对象都加上componentRestrictions即可。
• 确保你的Google Places API密钥已正确启用Places API服务，无权限配置问题。

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