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

本文将向大家介绍百度地图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脚本是异步加载的，对页面元素的加载没有任何影响。