Google Maps React Wrapper - 地点 API

Question

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

我想知道是否有人使用此包装器实现了地点自动完成功能？在我过去使用 Places 的经验中，实现是通过向 apis.google.com.

发送 Maps 脚本请求来加载 Places

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

提前致谢

Answer 1

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

您可以使用 react-wrapper 中的组件通过传入库 prop 来加载脚本。

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

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

...

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

...

Google Maps React Wrapper - 地点 API

Google Maps React Wrapper - Places API

google-maps-react