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

Question

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

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

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

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

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

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

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

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

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