Question

我一直试图通过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无济于事......我不确定我是否遗漏了什么。

Answer 1

Quick Example

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

"globals": { "google": true }

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

希望这可以提供帮助。

无法从React组件

1 个答案: