无法从React组件

时间:2017-03-31 05:46:18

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

我一直试图通过React在我的网页上嵌入Google地图。在我的index.html html中,我的标签

之间是followng 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)我如何连接这个回调,以便map 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无济于事......我不确定我是否遗漏了什么。

1 个答案:

答案 0 :(得分:0)

Quick Example

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

"globals": { "google": true }

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

希望这可以提供帮助。