在https下使用require.js加载百度地图api

百度地图的加载方式比较奇葩，百度提供的cdn加载地址是这样的http://api.map.baidu.com/api?v=2.0&ak=xxx,但是实际上，在网页上直接打开这个地址，返回的内容如下

(function () {
    window.BMap_loadScriptTime = (new Date).getTime();
    document.write(
        '<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=xxx&services=&t=20180823194355"></script>');
})();

也就是说，通过一个js再去写入一个script标签引入真正的js代码，原因的话，我就不知道了，可能感觉这样更安全？

刚开始我想尝试直接使用http://api.map.baidu.com/getscript?v=2.0&ak=xxx&services=&t=20180823194355"引入js代码

require.config({
    paths: {
        'BMap': ['http://api.map.baidu.com/getscript?v=2.0&ak=xxx&services=&t=20180823194355']
    },
    shim: {
        'BMap': {
            exports: 'BMap'
        }
    }
});

经过尝试，发现这样引入的js文件会报错，提示在https下使用了http的请求，发现是js内部使用了http调用了图片。事实证明，不能直接使用getScript直接加载js。

更改为如下代码

require.config({
    paths: {
        'BMap': ['https://api.map.baidu.com/api?v=2.0&ak=xxx&s=1']
    },
    shim: {
        'BMap': {
            exports: 'BMap'
        }
    }
});

但是这样的话，页面中又会报如下的错误

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

大概的意思应该是不能在异步加载的文件中请求其他脚本。如果你在页面中console.log(BMap) 应该会发现提示你 BMap is not defined。

后来经过查资料，发现还要使用require-async来加载类似于百度地图这样的脚本

async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).

使用这个插件可以实现在异步加载该脚本的同时，允许该脚本中再去加载其他的脚本。

附上require的插件地址：https://github.com/millermedeiros/requirejs-plugins

更改为如下代码

require.config({
    paths: {
        'async': 'requirejs-plugins/async',
        'BMap': ['https://api.map.baidu.com/api?v=2.0&ak=xxx&s=1']
    },
    shim: {
        'BMap': {
            exports: 'BMap'
        }
    }
});
require(['async!BMap'], function(){
    console.log(BMap)
    //  在此处便可实例化BMap
    //  注意在上面不可写成function(BMap),否则会提示 BMap is undefined
});

总结

使用https 要在后面加&s=1
不能直接使用getscript直接加载js
shim，shim的作用是为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。简单来说就是对requirejs要引用的第三方非AMD规范的插件、类库的特殊处理。
使用require-async

在https下使用require.js加载百度地图api

总结

猜你喜欢