加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

百度地图API详解之地图API加载方式

发布时间:2018-10-06 18:19:52 所属栏目:运营 来源:站长网
导读:本文将向大家介绍 百度地图 API的两种不同加载方式:同步加载和异步加载。 同步加载 这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址: script src=http://api.map.baidu.com/api?v=1.2/script
副标题[/!--empirenews.page--]

本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载。

同步加载

这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址:

<script src="http://api.map.baidu.com/api?v=1.2"></script>

此时脚本是同步加载的,如果直接在浏览器敲入这个地址你会发现这段js脚本实际返回的内容为: 

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] document.write('<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/12/bmap.css"/>'); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450"></script>');

返回的脚本通过document.write方法写入了一个link标签和另一个script标签,link标签负责加载API的样式表文件,而另一个script则是地图API真正的脚本资源。当然你也可以把脚本写在body标签内,但是从规范角度来说不建议这么写(html4规范上规定link标签只能存在于head标签内)。一个完整的同步加载的代码示例如下:


提示:可修改后代码再运行!

我们看到在地图容器#map之后,立刻插入了一个script标签,标签内直接编写调用API的代码,效果如图:

浏览器先加载API的资源然后再加载页面其他元素,通过资源加载顺序图可以更清晰的看到这一点:

百度地图API详解之地图API加载方式

注意这里的蓝色竖线出现在API脚本加载(包括网络时间和执行时间)完以后,这就表明了页面正在同步加载API的JS脚本。此外还看到在加载主脚本的同时浏览器是被阻塞住的,不能加载其他页面资源。当然API也在逐渐努力减少同步加载JS的文件大小,这除了让地图本身展现速度更快以外,还能最大限度的减少对第三方页面的影响。

如果使用地图的页面内容较多,而地图仅是一个小模块时,可以考虑将API脚本放在body的最后,而地图初始化放在body的onload事件中:


提示:可修改后代码再运行!

这样API的脚本不会影响页面其他元素,虽然用法不太规范。

异步加载

API支持完全异步加载,使用方式如下:


提示:可修改后代码再运行!

我们通过动态创建script标签的方式来添加对地图API的引用,此时API脚本是异步加载的,如果直接在浏览器输入这个地址,我们会得到下面代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com] var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'http://api.map.baidu.com/res/12/bmap.css');
document.getElementsByTagName('head')[0].appendChild(link);
window.BMap = window.BMap || {};
window.BMap.apiLoad = function () {
delete window.BMap.apiLoad;
if (typeof initialize == "function") {
initialize()
}
};
var s = document.createElement('script');
s.src = 'http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450';
document.body.appendChild(s);

代码里没有了document.write,而是createElement动态添加。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读