我正在使用 Material UI 附带的 Google 地图地点自动完成功能,但我一直在尝试限制结果。当用户开始输入时,我想要返回的唯一建议是城市、州供他们选择。
这里是 MUI 文档的链接和示例: Material UI - Google Places 自动完成
谢谢!
看起来库中的代码正在使用 AutocompleteService.getPlacePredictions。为了实现您的用例,您需要将值为
types
的 ['(cities)']
属性包含到您的 AutocompleteService.getPlacePredictions 请求中。这将指示地点服务返回与 locality 或administrative_area_level_3 匹配的结果,如此处所述
您可以将其添加到代码示例中的 fetch 中,如下所示:
fetch({ input: inputValue, types: ['(cities)'] }, (results) => {
if (active) {
let newOptions = [];
if (value) {
newOptions = [value];
}
if (results) {
newOptions = [...newOptions, ...results];
}
setOptions(newOptions);
}
});
这是示例代码。确保使用您的 API 密钥才能使示例正常工作。
fetch(
{
input: inputValue,
types: [
"country",
"administrative_area_level_1",
"administrative_area_level_2",
"locality",
],
},
(results) => {
if (active) {
let newOptions = [];
if (value) {
newOptions = [value];
}
if (results) {
newOptions = [...newOptions, ...results];
}
setOptions(newOptions);
}
}
);
查看您可以使用的不同场所类型此处