Google 地图 React 包装器 - 地点 API

Question

我正在使用 Google ReactJS 库将地图添加到我的 React Web 应用程序中。@googlemaps/react-wrapper

我想知道是否有人使用这个包装器实现了地点自动完成？根据我过去使用地点的经验，实施方式是通过对 apis.google.com 的地图脚本请求来加载地点。

从我一直在尝试做的事情来看，这个反应包装库似乎没有太多文档或灵活性。

提前致谢

Answer 1

在自述文件中找到了答案，发布给其他可能正在寻找的人。

您可以使用react-wrapper 中的 <Wrapper /> 组件通过传入libraries prop 来加载脚本。

 <Wrapper apiKey="api_key" libraries={["places"]} />

从那里，我建议查看他们的地图实现，并遵循地点自动完成小部件的实现。我发现的一件重要的事情是将 <Wrapper /> 组件放在输入引用的范围之外。另外，您可以在多个区域使用 <Wrapper /> 组件，只需确保配置相同即可。

...

const [autoCompleteWidget, setAutoCompleteWidget] = useState<
    google.maps.places.Autocomplete | undefined
  >(undefined);

useEffect(() => {
    if (ref.current && !autoCompleteWidget) {
      console.log(`init widget`);
      setAutoCompleteWidget(
        new google.maps.places.Autocomplete(ref.current, {
          types: ["establishment"],
          componentRestrictions: { country: ["US"] },
          fields: ["place_id"],
        })
      );
    }
  }, [ref, autoCompleteWidget]);

...