Question

我到处都看过这个bug，但没找到任何有用的东西。这是代码：

MapsLoader.prototype._setup = function () {
    var promise = new RSVP.Promise(function (resolve) {

        // Callback for Google Maps that resolves the promise
        window.gmapsLoaded = function () {
            console.log('[Maps Loader] Loaded');
            resolve();
        };

        console.log('[Maps Loader] Loading...');

            // Create a URL with the API key pointing to the gmapsLoaded callback
        var mapsURL = 'https://maps.googleapis.com/maps/api/js?key=' + config.googleMaps.APIKey + '&sensor=false&callback=gmapsLoaded',

            // Create script object
            script = $('<script />').attr('src', mapsURL);

        $('head').append(script);
    });

    // Remove the gmapsLoaded function from global scope
    promise.then(function () {
        window.gmapsLoaded = undefined;
    });

    // Return the promise
    return promise;
};

它是MapsLoader模块的一部分，只需将Google地图脚本添加到head（仅在需要时），等待Google地图加载回调，然后解析承诺（在指出使用它的文件可以开始做事。）

适用于Safari，Chrome，Firefox和IE10。但是在IE 8和9中我收到错误：

Object doesn't support property or method 'Load'（IE9）
Object doesn't support property or method（IE8）

来自main.js Google地图文件的第55行：

k.google.maps.Load(...)

在<[em Loader]已加载“日志消息之后发生，因此回调正在运行且页面继续正常加载，但Google地图区域为空白。

如果我打开缓存（即不使用IE Developer Tools），页面有时会第二次运行，这表明它可能是某种加载竞争条件。

我能够通过在head条件评论中加载Google地图代码来修复它，因此它只会在IE中的所有页面上加载（然后检测google是否已存在于MapsLoaded模块）。这确实有效，但这并不令人愉快，我宁愿找到路线原因。

其他信息：我使用RequireJS进行模块加载。

我尝试过的事情：

使用Google地图网址上的async=2参数（建议here）

附加到body而不是head（与Google API示例相同）

将所有内容置于$.ready来电
中

由于

Answer 1

使用$.getScript(mapsURL)（即通过AJAX请求加载）而不是手动将脚本附加到head似乎有效。

不确定为什么以这种方式加载它会产生影响，但确实如此。

Answer 2

您可以将此脚本<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>添加到项目的索引文件中。问题是由于项目中的支持polyfill不合适。

异步谷歌地图在IE中加载错误

2 个答案: