Material UI - Google 地图自动完成 - 仅限于城市和州?

问题描述 投票:0回答:2

我正在使用 Material UI 附带的 Google 地图地点自动完成功能,但我一直在尝试限制结果。当用户开始输入时,我想要返回的唯一建议是城市、州供他们选择。

这里是 MUI 文档的链接和示例: Material UI - Google Places 自动完成

谢谢!

reactjs google-maps autocomplete material-ui google-places-api
2个回答
3
投票

看起来库中的代码正在使用 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 密钥才能使示例正常工作。


0
投票
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);
    }
  }
);

查看您可以使用的不同场所类型此处

© www.soinside.com 2019 - 2024. All rights reserved.