无法从 React 组件访问脚本标签中的谷歌地图库答案

【问题标题】：Can't access Google Maps library in script tag from React component无法从 React 组件访问脚本标签中的谷歌地图库
【发布时间】：2017-03-31 05:46:17
【问题描述】：

我一直在尝试通过 React 在我的页面上嵌入 Google 地图。在我的 index.html html 中，我的标签之间有以下 scipr 标签

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>

我需要创建 initMap 回调函数。我希望这个回调函数在我的 Map 组件中。

1) 我如何连接这个回调，以便地图 API 知道在哪里可以找到它？

2) 要实际创建地图，我是通过 google 对象来完成的。

var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      scrollwheel: false,
      zoom: 8
    });

但是，我的 React 组件无法编译，因为它抱怨“google”对象不存在——这意味着它没有按应有的方式暴露给我。当然，当我进入控制台时，我可以访问它。似乎该组件要么无法访问它（尽管它应该因为脚本标签中的对象成为全局对象，对吗？）或者它在加载库之前访问它（即使我不知道如何修复它它在脚本标签中显示“延迟”）。

任何帮助将不胜感激。我的问题类似于this，但接受的答案对我不起作用。

我也试过这个tutorial 无济于事...我不确定我是否遗漏了什么。

【问题讨论】：

你用过 webpack 还是 eslint ？
是的，我正在使用 webpack——更具体地说，只是使用 create-react-app 中的所有内容

标签： javascript html reactjs dom google-maps-api-3

【解决方案1】：

Quick Example

如果您想忽略错误，请尝试在您的 eslint 配置中添加全局变量

"globals": { "google": true }

在我的示例中，我删除了 script 标记中的回调参数，这是在我的组件中完成的。

希望这能有所帮助。

【讨论】：

谢谢，这可行，但我想通过 create-react-app 保留我的所有配置。