百度地图之异步加载

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

By:Luoxueing- 2014-06-12 05:19:20

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

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

开始一直使用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函数找不到家了。

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




『阅读更多建站知识文章』