原創 全城公交標註系統 （2）

上一篇：全城公交標註系統

 

上一篇提到了如何綜合利用mapabc的資料和baidu map地圖來實現全城公交標註功能。實踐中發現，十分複雜。於是用了一個簡單得多的方法實現了我的目標。首先看看：

 

實現方法分為三個階段，介紹如下：

 

（1）準備資料。首先利用js指令碼從mapabc.com抓取全北京的公交線路資料和公交站資料。得到資料格式如下：

var bus_lines = new Array(<br />[110100011384,"1 路(靛廠新村--四惠)","116.280793,39.88953,116.285411,.....(沿途公交點，略）"]<br />);</p><p>var bus_stations = new Array(<br />[110100011384,"靛廠新村",116.280793,39.88953],<br />[110100011384,"靛廠村",116.289163,39.889537],<br />[110100011384,"蓮寶路口東",116.296119,39.88955],<br />[110100011384,"馬官營西",116.302096,39.889698],<br />[110100011384,"馬官營",116.306156,39.889928],<br />[110100011384,"六裡橋北",116.310587,39.88786],<br />[110100011384,"公主墳南",116.310551,39.90272],<br />[110100011384,"公主墳東",116.312017,39.906172],<br />[110100011384,"軍事博物館",116.325902,39.907398]<br />);

 

（2）將這些資料轉化成js可以識別的資料結構，前後使用了兩種方式：

    第一種方式：將這些資料格式化成一個js數組，另存新檔data.js，使用時用<script src="data.js" />匯入即可直接使用。該方法實現簡單，並且無需伺服器端得代碼參與，但是缺點卻也十分明顯：整個data.js佔用了11MB的空間，下載速度極慢。利用該方法實現的系統：http://xzaoshu.com/raywill/solu/

    第二種方法：將這些資料格式化成MYSQL，然後利用phpMyAdmin匯入到資料庫中。該方法的優點是資料載入速度快，使用者等待時間較短。缺點也不少，首先需要編寫伺服器端操作資料庫的代碼（php+mysql），然後還需要編寫用戶端的資料擷取代碼（jquery+json），並且每次查詢都需要和伺服器互動，每次查詢地圖都需要等待伺服器結果。利用該方法實現的系統：http://xzaoshu.com/raywill/solu2/client/

 

最後發布版本我們選擇了方案2.因為方案一每次下載data.js都需要消耗2~4分鐘，實在太長。即使嘗試了js壓縮，效果也還是不理想。如果選擇方案一，所有運算都需要編寫js代碼，包括定位最近的公交，尋找對應公交線路等；選擇方案2可以充分利用sql語句來進行查詢，十分方便。

 

 

（3）編寫用戶端js代碼，將資料顯示在地圖上。這裡因為mapabc.com和百度地圖的座標不一致（貌似所有地圖網站的座標都是各自為政，唉，真是要不得！），所以放棄了使用百度地圖，而是直接使用mapabc.com的地圖。速度還不錯~

 

 

有興趣的可以follow我：http://weibo.com/raywill2