JS控制台(谷歌地图API)中的"initMap is not a function"错误

Question

我很感谢它已经被多次询问，但是我找不到解决脚本并用initmap函数作为单独文件加载脚本的方法。

让我解释：

我正在调用Google Maps API：

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

随后是我捆绑的主JS文件，其中包含initmap函数。

<script src="/js/main.js"></script>

我有标题中的错误。

我尝试做的事情：

• 加载main.js首先 - 相同错误。
• 在头部部分中移动两个脚本 - 相同的错误。
• 加载main.js第二-同一错误。
• 将两个脚本分开在页面顶部(头(和底部的顶部(身体末端之前((每种方式( - 相同的错误。

有效的方法是按照：

调用页面中的函数

<script>
   function initMap() {
   //rest of the code
</script>

并在API呼叫后将其放置。

我感谢这是解决控制台错误消息的初始问题的解决方案，但是我想从主JS文件中启动并调用此函数，就像我对JS的其余部分一样。

任何帮助和解释，都将不胜感激:)谢谢

编辑1-在下面添加了更多代码，并将功能移动到th main.js文件的顶部

所以Main.js现在看起来像-Webpack Blob在开始后面：

function initMap() {
    var uluru = { lat: 40.741895, lng: -73.989308 };
    var map = new google.maps.Map(document.getElementById('map'), _defineProperty({ center: { lat: 40.741895, lng: -73.989308 }, zoom: 14 }, 'center', uluru));
    var marker = new google.maps.Marker({
        position: uluru, map: map
    });
}

错误仍会发生，地图将不会加载。

编辑2-在评论和建议之后完成更多测试。

当我使用JS箱代码尝试全局范围时，它也无法使用。

所以，我将代码手动导出到一个单独的文件中，现在将其加载为

 <script src="/js/Maps.js"></script>

它有效。

表明，WebPack和Babel造成问题...也许我应该模块。Export函数以某种方式？

我的main.js(prebundled-适用于webpack(看起来像：

require('./base/main');
require('./modules/Maps');

虽然Maps.js(预捆绑(在末尾没有任何导出。

Answer 1

好吧，我弄清楚了。

问题是WebPack没有给Initmap一个全局范围。

一些解决方案：

• 将 window.initMap = initMap;添加到地图的末端。

• 添加对象var initMapObj = require('./modules/Map'); initMapObj.initMap();

更多阅读：

如何与Google Maps API一起使用WebPack？

webpack：如何导出功能？

WebPack捆绑包中的导出功能