百度地圖的模塊化加載方案
百度地圖的加載方式比較奇葩耀态，比如百度提供的一個(gè) js 腳本地址是這樣http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM屋讶，直接使用瀏覽器訪問(wèn)，這個(gè)文件的內(nèi)容是這樣：
(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>');
})();
百度地圖通過(guò)一個(gè)腳本再去請(qǐng)求另外一個(gè)腳本，這樣的方式可能是我見(jiàn)的少吧系馆，感覺(jué)這樣會(huì)比較安全刑巧。
在直接訪問(wèn)后面這個(gè)網(wǎng)址，得到的就是真正的百度地圖api文件了逆皮。
看起來(lái)好像直接轉(zhuǎn)成 requirejs 加載的方式?jīng)]有問(wèn)題宅粥，那就試試？
// requirejs 的配置电谣，因?yàn)榘俣鹊貓D是非AMD模式的秽梅，所以需要加上shim進(jìn)行轉(zhuǎn)換
require.config({
paths: {
'BMap': ['http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM'],
},
shim: {
'BMap': {
deps: ['jquery'],
exports: 'BMap'
}
}
});
// 調(diào)用百度地圖
define(['jquery','BMap'], function(){
var map = new BMap.Map("map");
});
來(lái)了來(lái)了，控制臺(tái)非常精準(zhǔn)的出現(xiàn)了錯(cuò)誤：
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
第一個(gè)和第四個(gè)是控制臺(tái)打印出來(lái)的錯(cuò)誤信息剿牺，中間兩個(gè)是 requirejs 打印出來(lái)的錯(cuò)誤信息企垦。其中第一個(gè)錯(cuò)誤只是黃色的感嘆號(hào)（因?yàn)楫?dāng)前請(qǐng)求的文件已經(jīng)加載，大概是提醒你異步加載的文件是不能再請(qǐng)求腳本的）晒来；最后一個(gè)錯(cuò)誤是紅色的叉钞诡，因?yàn)檫@里找不到BMap這個(gè)對(duì)象。
好了潜索，大概問(wèn)題知道了臭增。如何解決？
經(jīng)過(guò)大量的查找竹习，發(fā)現(xiàn) requirejs 有async這樣一個(gè)插件誊抛，附上 requirejs 插件列表：https://github.com/requirejs/requirejs/wiki/Plugins
這個(gè)插件可以使當(dāng)前加載的 js 腳本采用異步的方式加載更多的腳本文件，官方原話是這樣的：
async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).
所以配置好 async.js
require.config({
paths: {
'async': '../../lib/require/async'
}
}
調(diào)用百度地圖的時(shí)候這樣寫(xiě)：
// 調(diào)用百度地圖
define(['jquery','async!BMap'], function(){
var map = new BMap.Map("map");
});
這樣就能成功的使用模塊化的技術(shù)調(diào)用百度地圖了
附上個(gè)人博客對(duì)應(yīng)博文地址：
http://lancelot_lewis.coding.me/2016/05/24/requirejs/requirejs-map/
