Google 地点自动完成以及 google 地图 - 加载问题

Question

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

现在我需要在地图中整合地点 api。

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

Error: [react-places-autocomplete]: Google Maps JavaScript API library must be loaded. See: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library

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

我需要这两个组件协同工作。

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

Answer 1

由于错误指出必须加载 Google 地图 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 demonstrates how to integrate react-places-autocomplete and 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"]
});

Google 地点自动完成以及 google 地图 - 加载问题

Google Places Autocomplete along with google maps - load issue

reactjs

google-maps

google-maps-react