谷歌地点自动完成与谷歌地图-加载问题

Question

我在我的项目中使用google-maps-react。

现在我需要在地图中集成places api。

但是似乎存在一些加载顺序问题，因此我收到以下错误消息。

错误：[react-places-autocomplete]：必须加载Google Maps JavaScript API库。请参见：https://github.com/kenny-hibino/react-places-autocomplete#load-google-library 如果我删除places组件，则地图正常工作。

我需要让这两个组件一起工作。

有任何解决方法吗？

- prajeesh

Answer 1

根据错误提示，需要加载Google Maps JavaScript API库，可以考虑以下选项。通过在public/index.html中添加引用来静态加载：

<script src="https://maps.googleapis.com/maps/api/js?key=--GOOGLE-MAPS-KEY--&libraries=places"></script-->

例如，可以通过google-maps-react GoogleApiWrapper HOC来实现，代码如下：

export default GoogleApiWrapper({
  apiKey: "--GOOGLE-MAPS-KEY--",
  libraries: ["places"]
})(MapContainer);

这个演示展示了如何集成react-places-autocomplete和google-maps-react。

- Vadim Gremyachev

---

太棒了！我自己不可能做到这一点，我的情况是混合使用@react-google-maps/api和react-google-autocomplete。 - Rob

在脚本标签中添加&libraries=places :) - Ryan Dhungel

Answer 2

我使用 @react-google-maps/api。对我来说解决办法是将 places 添加到 libraries 字段中。

const {isLoaded} = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY as string,
    libraries: ["places"]
});

- Ivan Yulin

Answer 3

我遇到了这个问题，因为我在同一页加载了 google-map-react 和 react-google-autocomplete。我必须告诉我的 google-map-react 组件也要加载地点库，像这样：

<GoogleMapReact 
   bootstrapURLKeys={{ 
      key: API_KEY,
      libraries:['places'],
   }} 
/>

地图组件首先加载 Google 脚本，但不包括 places 库，除非有指定。当您在加载自动完成组件后，Google 见到您已经加载了地图脚本，因此不会再次添加它。这就是为什么您必须在首次加载 Google 地图脚本的组件上指定所有库的原因。

您可以在这里阅读更多关于此问题的信息。

- Dustin Spengler