Google地方信息自动完成功能以及Google地图-加载问题

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组件，则地图可以正常工作。

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

关于如何解决此问题的任何想法？

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

This demo演示了如何集成react-places-autocomplete和google-maps-react

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