今天幫地理所的一個同學做了一個關於百度地圖公交路線搜索的東西，就是把各條公交路線匯總在一張圖上。
本來覺得蠻容易的，后來試了一下，發現將一條公交路線，以及公交站點的信息搜索並顯示出來，很容易實現，官方也已經提供了demo，但是將兩條或者多條路線放在一起顯示出來就有一些困難了。
百度地圖提供BusLineSearch()類進行公交路線查詢，在這個類中使用getBusLine()方法獲取路線並在地圖上繪制。在測試過程中發現，這個方法沒有辦法記錄之前的信息，也就是說每次在獲取之前都會清空上一次查詢到的路線，將最新查詢到的路線在地圖上繪制出來。而且，這種方法獲取的路線，只是簡單的圖片，保存不了地理所的那個同學所需要的數據格式，所以這個思路就擱置了。歡迎大家對這個思路進行補充交流。
既然上一種思路行不通，就換一種想法：獲取各條公交路線的站點地理位置（GPS坐標）。所謂獲取各站點的GPS坐標，就是在公交路線查詢的基礎之上，通過js函數解析獲取到的信息。顧名思義，就是在已經獲取到的數據的基礎之上，分析其數據結構，然后將所需要的信息，包括公交線路的名稱、站點的名稱以及站點的GPS坐標，提取出來。由於時間有限，本來想將信息提取出來之后轉成json格式，然后寫到本地文件中，按線路名稱命名。但是試了幾種常用的方法（ActiveXObject()）之后，然並卵。就只好在console中顯示出來，后來想到直接的頁面中document.writeln()出來，直接復制更方便一些；這樣一來，就涉及到繼續查詢的問題，docment.writeln()之后，原有頁面數據就不存在，就無法繼續進行查詢，所以需要回到原來的頁面，於是就想到使用document.location,reload()函數，重新加載頁面，然后繼續進行查詢。因為自己復制操作，需要一些時間，所以在需要自己操作的步驟前，加上setTimeout()函數，來延時執行接下來的動作。
以上是進行編碼的思路，接下來就是實際的代碼。
I. 首先是百度提供的官方demo，在其基礎之上，加了一些修改，新增了輸入查詢框和百度Logo。復制以下代碼，在本地新建一個html文件，如map_test.html，用瀏覽器打開即可。
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <style type="text/css"> 6 body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} 7 #l-map{height:300px;width:100%;} 8 #r-result {width:100%;} 9 </style> 10 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WONmQMWf5T6GneZ9lkgF34hz"></script> 11 <title>公交/地鐵線路查詢</title> 12 </head> 13 <body> 14 <p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;width:200px;"> </span><input type="text" value="331" id="busId" onkeypress="testEnter()" />路公交 <input type="button" value="查詢" onclick="busSearch();" /></p> 15 <!-- <div id="l-map" style="float:left;width:600px;height:500px;border:1px solid gray" ></div> 16 <div id="r-result" style="float:left;width:300px;height:500px;font-size:13px;"></div> --> 17 <div id="l-map"></div> 18 <div id="r-result"></div> 19 </body> 20 </html> 21 <script type="text/javascript"> 22 // 百度地圖API功能 23 var map = new BMap.Map("l-map"); // 創建Map實例 24 map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); 25 var fstLine,fstLine_1; 26 27 var busline = new BMap.BusLineSearch(map,{ 28 renderOptions:{map:map,panel:"r-result"}, 29 onGetBusListComplete: function(result){ 30 if(result) { 31 fstLine = result.getBusListItem(0);//獲取第一個公交列表顯示到map上 32 busline.getBusLine(fstLine); 33 } 34 } 35 }); 36 function busSearch(){ 37 var busName = document.getElementById("busId").value; 38 busline.getBusList(busName); 39 }; 40 function testEnter(){ 41 if(event.keyCode==13) { 42 busSearch(); 43 return false; 44 } 45 } 46 </script>
II.在瀏覽器中，打開控制台，一般按F12就可以打開。然后輸入以下命令，直接復制回車就可以。下文中的代碼是查詢“h45”這條公交線路的。
1 var k = 45; 2 function map_bus() 3 { 4 5 var busname_head = "h"; 6 7 var busName = busname_head + k.toString();//構造查詢的公交線路名稱 8 k++; 9 busline.getBusList(busName);//調用百度API，查詢公交線路 10 setTimeout("map_lines()", 5000);//因為如果地圖公交路線沒有加載出來，繼續執行會出錯，所以需要先延時一下，等公交路線完全加載出來之后，再繼續執行 11 } 12 13 function map_lines() 14 { 15 var lines = ""; 16 var bl = Instance('TANGRAM__n'); 17 var amount = bl.gc.tA.length;//公交路線的總數 18 19 for( var i = 0 ; i < amount ; i++) 20 { 21 var line_name = bl.gc.tA[i].name;//公交路線的名稱，如h45路(大地-湯河口) 22 23 lines = lines + line_name + ": [" 24 25 bl._selectBusListItem(i);//選擇第i條路線 26 var line = bl.Li; 27 for( var j = 0 ; j < line.length ; j++) 28 { 29 var station_position = line[j].point;//公交站點的GPS坐標 30 var station_name = line[j].gB;//公交站點的名稱 31 lines = lines + station_name + ": [" + station_position.lat + ","+ station_position.lng + "]," ; 32 } 33 lines = lines.substr(0,lines.length-1); 34 lines = lines + "],"; 35 lines = lines.substr(0,lines.length-1); 36 } 37 38 document.writeln(lines);//在頁面輸出公交路線信息 39 setTimeout(" document.location.reload()", 2000);//等復制操作完成后，重新加載本頁面，繼續進行查詢 40 map_bus(); 41 } 42 map_bus();
以上基本就是這一晚上+昨天一晚上的工作。
References:
[1]借助百度地圖api下載公交信息(本來以為能用上，但是並沒有幫助，提供一種思路)
[2]使用代碼分析神器logger2js,搞定一切難題[百度地圖api示例](這篇Blog還是提供了不少幫助，但是跟着他的來，他的工具怎么都用不了，倒是跟着他的思路，分析到了數據結構，最終找到了需要的信息)