使用requirejs 调用百度地图解决方案

百度地图的模块化加载方案

百度地图的加载方式比较奇葩,比如百度提供的一个 js 脚本地址是这样http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM,直接使用浏览器访问,这个文件的内容是这样:

1
2
3
4
(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 加载的方式没有问题,那就试试?

1
2
3
4
5
6
7
8
9
10
11
12
// requirejs 的配置,因为百度地图是非AMD模式的,所以需要加上shim进行转换
require.config({
paths: {
'BMap': ['http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM'],
},
shim: {
'BMap': {
deps: ['jquery'],
exports: 'BMap'
}
}
});
1
2
3
4
// 调用百度地图
define(['jquery','BMap'], function(){
var map = new BMap.Map("map");
});

来了来了,控制台非常精准的出现了错误:

1
2
3
4
5
6
7
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

1
2
3
4
5
require.config({
paths: {
'async': '../../lib/require/async'
}
}

调用百度地图的时候这样写:

1
2
3
4
// 调用百度地图
define(['jquery','async!BMap'], function(){
var map = new BMap.Map("map");
});

这样就能成功的使用模块化的技术调用百度地图了

坚持原创技术分享,您的支持将鼓励我继续创作!