在 React 应用程序的 Util 文件中初始化谷歌地图

Question

我在我的React应用程序中使用Google Maps ，并在一个util文件中处理所有Maps API内容。

在我的index.html页面中，我链接到Google Maps地图库——见下文：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=my_api_key"></script>

我遇到的问题是，在我的util文件中，出现“未定义谷歌”错误——见下文。

我该如何处理？ 我链接到Google Maps地图库，所以我认为我不能导入任何东西，因为它不是npm包。

Answer 1

尝试添加窗口作为前缀：

const map = new window.google.maps.Map(document.createElement('div'));

Answer 2

如果您使用<script>包含谷歌地图，您也会在组件中收到此警告，因为谷歌地图 API 已添加到全局对象（窗口）。 您可以改用window.google ，或移至为 Google 地图创建的 npm 包，例如google-maps-react 、 @react-google-maps/api 、 react-google-maps 。