向jQuery Mobile Web site添加方向驱动
2013-01-22 22:28 lefan 阅读(339) 评论(0) 编辑 收藏 举报Raymond Camden 的Adding driving directions to a jQuery Mobile web site.介绍了向jQuery Mobile Web site添加方向驱动,文章在这里,我感觉非常有趣,DEMO。
通过这个例子,把baidu map API学习了下。 baidu map API支持异步加载,使用方式如下:通过动态创建script标签的方式来添加对地图API的引用,此时API脚本是异步加载的,如果直接在浏览器输入这个地址,我们会得到下面代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>异步加载</title> 6 <script type="text/javascript"> 7 function initialize() { 8 var mp = new BMap.Map('map'); 9 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 10 } 11 12 function loadScript() { 13 var script = document.createElement("script"); 14 script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize"; 15 document.body.appendChild(script); 16 } 17 18 window.onload = loadScript; 19 </script> 20 </head> 21 <body> 22 <div id="map" style="width:500px;height:320px"></div> 23 </body> 24 </html>
通过动态创建script标签的方式来添加对地图API的引用,此时API脚本是异步加载的,如果直接在浏览器输入这个地址,我们会得到下面代码:
1 var link = document.createElement('link'); 2 link.setAttribute('rel', 'stylesheet'); 3 link.setAttribute('type', 'text/css'); 4 link.setAttribute('href', 'http://api.map.baidu.com/res/12/bmap.css'); 5 document.getElementsByTagName('head')[0].appendChild(link); 6 window.BMap = window.BMap || {}; 7 window.BMap.apiLoad = function () { 8 delete window.BMap.apiLoad; 9 if (typeof initialize == "function") { 10 initialize() 11 } 12 }; 13 var s = document.createElement('script'); 14 s.src = 'http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450'; 15 document.body.appendChild(s);
可以在引用脚本的时候添加callback参数,当脚本加载完成后callback函数会被立刻调用。