React项目中Google Places API Autocomplete指定类型无结果求助

我之前也踩过这个坑！不加配置能正常工作，但一指定类型就没结果，大概率是你用错了Autocomplete的类型参数格式或者取值。

问题根源 #

Google Places Autocomplete的types参数有特定的取值规则，你不能直接写['city', 'state', 'country']这种自定义值，得用官方支持的类型标识。而且参数必须是数组格式，单个类型也要放在数组里。

正确的配置方案 #

想要只返回城市、州、国家这类行政区域，推荐用(cities)这个特殊类型，它会涵盖城市、城镇以及更高层级的州/国家行政区域。如果需要更精准的控制，也可以组合官方支持的行政区域类型：

// 基础方案：返回城市、州、国家相关结果
const autocomplete = new google.maps.places.Autocomplete(input, {
  types: ['(cities)']
});

// 进阶方案：限制特定国家 + 指定行政层级
const autocomplete = new google.maps.places.Autocomplete(input, {
  types: ['administrative_area_level_1', 'country', '(cities)'],
  componentRestrictions: { country: 'cn' } // 替换为你需要的国家代码，比如us、uk等
});

额外排查点 #

• 检查API权限：确保你的Google Cloud项目已经启用了「Places API」，并且API密钥有对应的调用权限，没有被限流或禁用。
• 查看控制台报错：打开浏览器开发者工具的控制台，看看有没有API相关的错误提示，比如密钥无效、权限不足等。
• 避免过度限制：如果同时设置了太多个类型限制，可能会过滤掉所有结果，建议先从(cities)开始测试，再逐步调整。

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