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

Question

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

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

谢谢！

Answer 1

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

Answer 2

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);
    }
  }
);

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