我一直试图通过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无济于事......我不确定我是否遗漏了什么。
答案 0 :(得分:0)
如果你想忽略错误,请尝试在你的eslint配置中添加全局变量
"globals": {
"google": true
}
在我的示例中,我删除了script
标记中的回调参数,我是在我的组件中完成的。
希望这可以提供帮助。