JavaScript動態加載script方式引用百度地圖API，Uncaught ReferenceError: BMap is not defined

百度地圖官網文檔介紹使用JSSDK時，僅提供了2種引入方式：

• script引入
• 異步加載

實際工作場景中僅某一兩個頁面或者只是單純有功能需要用到百度地圖，所以沒有必要在 index.html 中全局引用。

利用之前博客所寫的JavaScript---動態加載script和style樣式 進行操作，發現如下錯誤：

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

實際上百度地圖JSSDK沒有真正加載成功，按F12打開控制台看加載的資源，發現並沒有加載完整。

根據百度API開發文檔的提示，引用寫法是 http://api.map.baidu.com/api?v=3.0&ak=您的密鑰 ，打開后內容如下：

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

網上搜集的說法是說，此時頁面的dom已經全部加載完了，關閉了加載通道，document.write不能異步了，所以加載不上去。

經過優化后，我找到了一個新的寫法：

function LoadBaiduMapScript() {
    //console.log("初始化百度地圖腳本...");
    const AK = 你的密鑰;
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
    return new Promise((resolve, reject) => {
        // 如果已加載直接返回
        if(typeof BMap !== "undefined") {
            resolve(BMap);
            return true;
        }
        // 百度地圖異步加載回調處理
        window.onBMapCallback = function () {
            console.log("百度地圖腳本初始化成功...");
            resolve(BMap);
        };
        // 插入script腳本
        let scriptNode = document.createElement("script");
        scriptNode.setAttribute("type", "text/javascript");
        scriptNode.setAttribute("src", BMap_URL);
        document.body.appendChild(scriptNode);
    });
}

經測試，可以使用。