代码改变世界

向jQuery Mobile Web site添加方向驱动

2013-01-22 22:28  lefan  阅读(344)  评论(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函数会被立刻调用。