谷歌地方自动完成以及谷歌地图 - 加载问题答案

【问题标题】：Google Places Autocomplete along with google maps - load issue谷歌地方自动完成以及谷歌地图 - 加载问题
【发布时间】：2018-12-24 12:50:34
【问题描述】：

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

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

但似乎存在一些加载顺序问题，所以我收到以下错误。

错误：[react-places-autocomplete]：Google Maps JavaScript API 库必须加载。看： https://github.com/kenny-hibino/react-places-autocomplete#load-google-library

如果我删除地点组件，地图工作正常。

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

知道如何解决这个问题吗？

【问题讨论】：

标签： reactjs google-maps google-maps-react

【解决方案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

【讨论】：

太棒了！我自己不会得到这个，就我而言，我正在混合 @react-google-maps/api 和 react-google-autocomplete

【解决方案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"]
});

【讨论】：