百度地图的模块化加载方案
百度地图的加载方式比较奇葩，比如百度提供的一个 js 脚本地址是这样http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM，直接使用浏览器访问，这个文件的内容是这样：
(function () {
window.BMap_loadScriptTime = (new Date).getTime();
document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM&services=&t=20160503160001"></script>');
})();
百度地图通过一个脚本再去请求另外一个脚本，这样的方式可能是我见的少吧，感觉这样会比较安全。
在直接访问后面这个网址，得到的就是真正的百度地图api文件了。
看起来好像直接转成 requirejs 加载的方式没有问题，那就试试？
// requirejs 的配置，因为百度地图是非AMD模式的，所以需要加上shim进行转换
require.config({
paths: {
'BMap': ['http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM'],
},
shim: {
'BMap': {
deps: ['jquery'],
exports: 'BMap'
}
}
});
// 调用百度地图
define(['jquery','BMap'], function(){
var map = new BMap.Map("map");
});
来了来了，控制台非常精准的出现了错误：
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.
ReferenceError: BMap is not defined(…)
define
Uncaught ReferenceError: BMap is not defined
第一个和第四个是控制台打印出来的错误信息，中间两个是 requirejs 打印出来的错误信息。其中第一个错误只是黄色的感叹号（因为当前请求的文件已经加载，大概是提醒你异步加载的文件是不能再请求脚本的）；最后一个错误是红色的叉，因为这里找不到BMap这个对象。
好了，大概问题知道了。如何解决？
经过大量的查找，发现 requirejs 有async这样一个插件，附上 requirejs 插件列表：https://github.com/requirejs/requirejs/wiki/Plugins
这个插件可以使当前加载的 js 脚本采用异步的方式加载更多的脚本文件，官方原话是这样的：
async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).
所以配置好 async.js
require.config({
paths: {
'async': '../../lib/require/async'
}
}
调用百度地图的时候这样写：
// 调用百度地图
define(['jquery','async!BMap'], function(){
var map = new BMap.Map("map");
});
这样就能成功的使用模块化的技术调用百度地图了
附上个人博客对应博文地址：
http://lancelot_lewis.coding.me/2016/05/24/requirejs/requirejs-map/
网友评论