正文

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

IP云
IP云V管理员/6 阅读
08/17
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

经测试，可以使用。