关于javascript：JS控制台(Google Maps API)中出现“ initMap不是函数”错误


“initMap is not a function” error in JS console (Google Maps API)

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

让我解释：

我正在呼叫Google Maps API：

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

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

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

我有标题中的错误。

我试图做的是：

  • 首先加载main.js-同样的错误。
  • 将两个脚本移动到头部-同样的错误。
  • 第二次加载main.js-同样的错误。
  • 在页面顶部(头部)和底部(正文末尾之前)之间分别调用两个脚本(每种方式)-相同的错误。

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

1
2
   function initMap() {
   //rest of the code

并将其放在api调用之后。

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

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

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

所以main.js现在看起来像-webpack blob，开头是：

1
2
3
4
5
6
7
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代码尝试全局作用域时，它也不起作用。

因此，我将代码手动导出到单独的文件中，然后将其加载为

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

而且有效。

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

我的main.js(预打包-用于webpack)如下所示：

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

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

相关讨论

好吧，我知道了。

问题是webpack不能给initMap一个全局范围。

几个解决方案：

  • 将window.initMap = initMap;添加到Maps.js的末尾以使其具有全局作用域

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

更多阅读：

如何将Webpack与Google Maps API结合使用？

Webpack：如何导出功能？

Webpack捆绑包中的导出功能