网站设计中的百度地图异步加载

时隔将近一年，忘却了很多东西，终究还是放不下这个博客，再次走上不归路。

由于地图的应用越来越多，在生活中所起的作用越来越大，我们的项目对地图也青睐有加。

开始一直使用Google地图，原因之一是Google地图的灰色系与我们大部分项目的设计风格相符，后来由于Google被屏蔽，很多相关资源请求都很慢，还有打不开，所以考虑再三，决定使用百度地图。

百度地图开放的API提供了很强大的功能，如果不是专业开发地图相关项目，可能大部分都用不上，用的较多应该就是标注了。

百度地图API示例：http://developer.baidu.com/map/jsdemo.htm#a1_1

在调用百度API之前需要申请一个密钥，在调用的时候需要用到。

申请地址：http://developer.baidu.com/map/jshome.htm

当资源准备好了，给网页中添加以下代码即可调用成功：

// 百度地图API功能
var map = new BMap.Map("map");            // 创建Map实例,
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom();                            //启用滚轮放大缩小

上面的代码在地图API示例中都存在，其中new BMap.Map("map")中的"map"是需要显示地图的元素id：

直接在浏览器地址中输入:

http://api.map.baidu.com/api?v=2.0&ak=1.2

得到的是这样一段代码：

(function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('
');})();

执行到该js时就会请求很多地图资源，无疑是给网站增加了很大的负荷，有可能用户根本就不看你的地图，可你却浪费了人家的时间。

同步加载方式比较简单粗暴，对于喜欢文艺范的朋友来说，需要变得优雅一点。

百度API还支持异步加载

function setMap() {
  var map = new BMap.Map("map");            // 创建Map实例,
  var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
  map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
  map.enableScrollWheelZoom();                            //启用滚轮放大缩小
}
function loadScript() {
 var script = document.createElement("script"); //创建script标签
 script.src = "http://api.map.baidu.com/api?v=1.2&callback=setMap"; //异步加载的关键
 document.body.appendChild(script); //添加到页面
}
window.onload = loadScript; //当页面加载完毕，加载百度地图

在上面这段代码中，script.src链接中，有一个callback属性，后面跟着要执行的方法，当js加载完毕时，执行setMap方法，但是有个问题，setMap方法必须是全局可见，是一个全局变量，这是不是有点坑，别急，优雅肯定要进行到底的。

这里就可以根据自己的需求，什么时候需要加载地图，什么时候调用loadScript方法，比如说当页面滚动到地图容器时再加载地图。

好了，把script.src的属性添加到浏览器地址栏，发现会显示以下代码：

(function(){ 
  window.BMap_loadScriptTime = (new Date).getTime(); 
  window.BMap=window.BMap||{};
  window.BMap.apiLoad=function(){
    delete window.BMap.apiLoad;
    if(typeof setMap=="function"){ setMap(); }
  };
  var s=document.createElement('script');
  s.src='http://api.map.baidu.com/getscript?v=1.2&ak=&services=&t=20130716024057';
  document.body.appendChild(s);
  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);
})();

是否顿时有一种豁然开朗的感觉，刚刚那句代码实际上干了这么多事，分别加载了js和css资源，同时处理了callback函数。

现在我们就可以自己写上面这段代码，请求相关的数据，callback函数也就不会受到全局可见的限制了，妈妈再也不用担心callback函数找不到家了。

关于百度地图的异步加载问题，就到此结束，下一章将分析一下如何添加富标注。