本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载。
同步加载
这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址:
1
|
<
script
src
=
"http://api.map.baidu.com/api?v=1.2"
></
script
>
|
此时脚本是同步加载的,如果直接在浏览器敲入这个地址你会发现这段js脚本实际返回的内容为:
1
2
|
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标签内)。一个完整的同步加载的代码示例如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>同步加载</
title
>
<
script
src
=
"http://api.map.baidu.com/api?v=1.2"
></
script
>
</
head
>
<
body
>
<
div
id
=
"map"
style
=
"width:500px;height:320px;"
></
div
>
<
script
>
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
</
script
>
</
body
>
</
html
>
|
我们看到在地图容器#map之后,立刻插入了一个script标签,标签内直接编写调用API的代码,效果如图:
浏览器先加载API的资源然后再加载页面其他元素,通过资源加载顺序图可以更清晰的看到这一点:
注意这里的蓝色竖线出现在API脚本加载(包括网络时间和执行时间)完以后,这就表明了页面正在同步加载API的JS脚本。此外还看到在加载主脚本的同时浏览器是被阻塞住的,不能加载其他页面资源。当然API也在逐渐努力减少同步加载JS的文件大小,这除了让地图本身展现速度更快以外,还能最大限度的减少对第三方页面的影响。
如果使用地图的页面内容较多,而地图仅是一个小模块时,可以考虑将API脚本放在body的最后,而地图初始化放在body的onload事件中:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>同步加载</
title
>
<
script
>
function initialize(){
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
</
script
>
</
head
>
<
body
onload
=
"initialize()"
>
<
div
id
=
"map"
style
=
"width:500px;height:320px;"
></
div
>
<
script
>
</
script
>
<
script
src
=
"http://api.map.baidu.com/api?v=1.2"
></
script
>
</
body
>
</
html
>
|
这样API的脚本不会影响页面其他元素,虽然用法不太规范。
异步加载
API支持完全异步加载,使用方式如下:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>异步加载</
title
>
<
script
type
=
"text/javascript"
>
function initialize() {
var map = new BMap.Map('map');
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.2&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</
script
>
</
head
>
<
body
>
<
div
id
=
"map"
style
=
"width:500px;height:320px"
></
div
>
</
body
>
</
html
>
|
我们通过动态创建script标签的方式来添加对地图API的引用,此时API脚本是异步加载的,如果直接在浏览器输入这个地址,我们会得到下面代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
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动态添加。
我们还需要在引用地址里面添加callback参数,这是在告诉API加载完成后需要调用什么方法来初始化地图。注意这个方法名必须是全局可见的。此时我们再来看一下资源加载的瀑布图:
虽然资源总数没有什么变化,但是会发现蓝线和红线的位置都大大提前,这就说明地图API脚本是异步加载的,对页面元素的加载没有任何影响。