百度地图的模块化加载方案
百度地图的加载方式比较奇葩,比如百度提供的一个 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/