JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined
2024-10-19 16:45:40
百度地图官网文档介绍使用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);
});
}
经测试,可以使用。
最新文章
- HTML5 video标签播放视频下载原理
- vm中centos7配置静态ip访问外网
- WaxPatch中demo注意问题
- Altium Designer 文档信息设置以及模板制作
- Codeforces 650A Watchmen
- python_递归
- 函数xdes_get_offset
- lucene 实现word,pdf全文检索源码
- ios专题 - 单例模式的实现
- IOS开发笔记 IOS如何访问通讯录
- Json在asp.net开发中的应用
- Android自己定义组件之日历控件-精美日历实现(内容、样式可扩展)
- Mybatis转义字符
- git&;github入门使用
- python code(1)
- Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.
- 联想预装Win10/Win8换Win7 教程 以及svn使用教程
- ZOJ2540 Form a Square
- SharePoint 2010: Change welcome page on PowerShell
- Linux学习4-远程登录管理工具安装