JS 控制台中的“initMap 不是函数”错误（Google Maps API）

Question

我很感激现在已经多次询问它，但是我找不到解决它的方法并将带有 initMap 函数的脚本作为单独的文件加载。

让我解释：

我正在调用 Google Maps API：

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

其次是我捆绑的包含 initMap 函数的主 JS 文件。

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

我有标题中的错误。

我试图做的事情：

• 首先加载 main.js - 同样的错误。
• 在 head 部分移动两个脚本 - 相同的错误。
• 第二次加载 main.js - 同样的错误。
• 拆分页面顶部（头部）和底部（正文结束之前）（每种方式）之间调用的两个脚本 - 相同的错误。

有效的是按照以下方式调用页面内的函数：

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

并将其放在 api 调用之后。

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

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

编辑 1 - 在下面添加更多代码并将函数移动到 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 bin 代码尝试全局范围时，它也不起作用。

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

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

它有效。

它表明，以某种方式 webpack 和 babel 导致了一个问题......也许我应该以某种方式 module.export 函数？

我的 main.js（预捆绑 - 用于 webpack）看起来像这样：

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

而 Maps.js（预捆绑）最后没有任何导出。

Answer 1

Ok I figured it out.

The problem is with webpack that does not give a initMap a global scope.

A couple of solutions:

• 添加window.initMap = initMap;到 Maps.js 的末尾以赋予其全局范围

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

更多阅读：

如何将 Webpack 与 Google Maps API 一起使用？

Webpack：如何导出函数？

webpack bundle 中的导出功能