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

舒医生 發表於 2019-5-11 16:26:00

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

百度地图官网文档介绍使用JSSDK时，仅提供了2种引入方式：
<ul>
<li>script引入</li>
<li>异步加载</li>
</ul>
实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图，所以没有必要在 <code>index.html</code> 中全局引用。
利用之前博客所写的JavaScript---动态加载script和style样式进行操作，发现如下错误：
<div class="cnblogs_code">
<pre>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</pre>
</div>
实际上百度地图JSSDK没有真正加载成功，按F12打开控制台看加载的资源，发现并没有加载完整。
根据百度API开发文档的提示，引用写法是 http://api.map.baidu.com/api?v=3.0&ak=您的密钥，打开后内容如下：
<div class="cnblogs_code">
<pre>(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>');
})();</pre>
</div>
网上搜集的说法是说，此时页面的dom已经全部加载完了，关闭了加载通道，document.write不能异步了，所以加载不上去。
经过优化后，我找到了一个新的写法：
<div class="cnblogs_code">
<pre>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);
});
}</pre>
</div>
经测试，可以使用。 
来源：https://www.cnblogs.com/yangzhengier/p/10849087.html

頁: [1]

琼殿技术论坛's Archiver

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