JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined...

最新推荐文章于 2023-04-24 07:32:52 发布

YOOSHIN

最新推荐文章于 2023-04-24 07:32:52 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/YOOSHIN/article/details/103577743

本文解决百度地图JSSDK在动态加载时遇到的加载不完全问题，提供了一种新的异步加载写法，确保SDK加载成功并可立即使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图官网文档介绍使用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);
    });
}

经测试，可以使用。