百度地图API详解之公交导航
原文地址:http://blog.csdn.net/sup_heaven/article/details/8461593
只是作為備忘!!!
?
一次調試百度地圖多marker事件監聽的問題,不知如何解決,后來看了原作者jz1108才知道要用閉包。覺得原作者jz1108關于百度地圖的文章寫的不錯,所以轉載到了CSDN,為了尊重原作者jz1108,特此說明。
?
前面我們介紹過駕車導航了,今天來說說公交導航。
?
什么是公交導航
公交導航功能是告訴使用者從A到B的公交出行方案,而不是某條具體的公交線路信息,這一點需要廣大開發者注意。
公交導航功能通過類TransitRoute來實現,這里需要說說為啥不是BusRoute,而是TransitRoute。百度提供的是公共交通導航,公共交通不僅僅涉及bus,可能還會有地鐵、渡輪甚至以后的飛機火車,所以這里使用的是public transit中的transit進行描述。
?
一個簡單的例子
我們還是從一個簡單的例子開始:
var transit = new BMap.TransitRoute('北京', {renderOptions: {map: map,panel: 'panel'} }); transit.search('西單', '頤和園');代碼通過renderOptions設置渲染的地圖實例和側欄面板容器的id,其中map是已經實例化好的地圖,panel為已經準備好的div元素的id。我們會看到如下結果:
?
地圖上顯示了一個方案,在面板中列出了所有方案的描述,點擊不同的方案地圖會予以展示。
除了使用字符串類型以外,還可以提供坐標進行查詢,這樣可以得到更精確的結果。比如從“麥當勞”到“肯德基”這樣的路線查詢就不會得到結果,因為API不知道是從哪個麥當勞到哪個肯德基。下面的示例使用了坐標進行搜索。
transit.search(new BMap.Point(116.315157,39.987946), new BMap.Point(116.371499,39.880394));下面是使用坐標作為參數進行查詢得到的結果:
?
注意,由于提供的是坐標,所以起點和終點沒有具體的地點描述。
和駕車導航類似,起點和終點也可以是LocalResultPoi類型,我們還是用上面的坐標進行查詢,不過是封裝在一個LocalResultPoi類型當中的:
transit.search({title: '我這里', point: new BMap.Point(116.315157,39.987946)}, {title: '你這里', point: new BMap.Point(116.371499,39.880394)});這樣API在展示結果時就可以顯示起點和終點的描述了。
?
自定義覆蓋物展示
如果你不滿意API提供的默認線路的顏色和標注的樣式,你也可以選擇通過通過數據接口自行創建。注意,自己創建覆蓋物時,點擊列表中的方案將不會更新地圖區域,因為此時地圖區域的元素都是由開發者自行創建的。在使用數據接口之前,先通過一個結構圖來了解一個完整的公交方案的各個組成部分,以方便理解:
一個不需要換乘的公交方案是由:起點、起點到上車站的步行線路、上車站到下車站的公交線路以及下車站到終點的步行線路構成。當然有可能起點和上車站是重合的,或者終點和下車站是重合的,此時步行線路長度就為0(起點或終點本身就為公交站的時候)。如果有換乘,那么每次換乘中的下車站到上車站也有步行線路(如上圖的第二個方案所示)。
所以不論公交方案具體是什么樣,在數據上的表示都是一致的:
- 直達方案:2條步行線路 + 1條公交線路
- 換乘一次方案:3條步行線路 + 2條公交線路
- 換乘兩次方案:4條步行線路 + 3條公交線路
以此類推。
API中通過TransitRouteResult來描述公交導航結果,通過TransitRoutePlan來描述一條公交方案。那么怎么獲取公交導航結果和具體的方案的信息呢?請看下面的示例:
var transit = new BMap.TransitRoute('北京', {onSearchComplete: function(result) {if (transit.getStatus() == BMAP_STATUS_SUCCESS) {// 從結果對象中獲取起點和終點信息var start = result.getStart();var end = result.getEnd();addStart(start.point, start.title);addEnd(end.point, end.title);// 直接獲取第一個方案var plan = result.getPlan(0);// 遍歷所有步行線路for (var i = 0; i < plan.getNumRoutes(); i++) {if (plan.getRoute(i).getDistance(false) > 0) {// 判斷只有大于0的步行線路才會繪制addWalkRoute(plan.getRoute(i).getPath());}}// 遍歷所有公交線路var allLinePath = [];for (i = 0; i < plan.getNumLines(); i++) {allLinePath = allLinePath.concat(plan.getLine(i).getPath());addLine(plan.getLine(i).getPath());}// 最后根據公交線路的點設置地圖視野map.setViewport(allLinePath);}} });transit.search('北京大學', '北京交通大學');// 添加起點覆蓋物 function addStart(point, title){map.addOverlay(new BMap.Marker(point, {title: title,icon: new BMap.Icon('http://images.cnblogs.com/cnblogs_com/jz1108/329471/o_blue.png', new BMap.Size(38, 41), {anchor: new BMap.Size(4, 36)})})); }// 添加終點覆蓋物 function addEnd(point, title){map.addOverlay(new BMap.Marker(point, {title: title,icon: new BMap.Icon('http://images.cnblogs.com/cnblogs_com/jz1108/329471/o_red.png', new BMap.Size(38, 41), {anchor: new BMap.Size(4, 36)})})); }// 添加路線 function addWalkRoute(path){map.addOverlay(new BMap.Polyline(path, {strokeColor: 'black',strokeOpacity: 0.7,strokeWeight: 4,strokeStyle: 'dashed',enableClicking: false})); }function addLine(path){map.addOverlay(new BMap.Polyline(path, {strokeColor: 'blue',strokeOpacity: 0.6,strokeWeight: 5,enableClicking: false})); }在上面的代碼中,通過TransitRouteOptions的onSearchComplete屬性設置了回調函數,一旦檢索完成這個回調函數就會被調用。在回調函數開始我們先判斷檢索是否成功,如果成功表示至少有一條公交方案返回,這里我們先通過結果對象獲取起點和終點,接著直接獲取第一條方案,遍歷方案中所有步行線路和公交線路并繪制在地圖上,最后我們根據公交線路的點來設置一個合適的地圖視野。
你會在瀏覽器中得到如下效果:
?
在獲取結果對象時,除了通過回調函數參數獲取以外,還可以通過TransitRoute的getResults方法獲得,需要注意的是,由于搜索過程是異步的,以下代碼的寫法將不會得到結果:
transit.search('西單', '頤和園'); var res = transit.getResults(); // undefined因為search方法調用結束后搜索結果并沒有立即返回。開發者可以在回調函數中調用此方法立即獲得結果,也可以等回調函數執行完若干時間后再想獲取結果數據時調用。
?
自定義方案描述
通過TransitRoutePlan的getDescription可以獲得完整的方案描述,但是如果開發者想自行定義描述的形式則可通過數據接口進行。例如:
var transit = new BMap.TransitRoute('北京', {onSearchComplete: function(result) {if (transit.getStatus() == BMAP_STATUS_SUCCESS) {// 從結果對象中獲取起點和終點信息var start = result.getStart().title;var end = result.getEnd().title;// 直接獲取第一個方案var plan = result.getPlan(0);// 獲取步行線路與公交線路個數總和,用于遍歷var total = plan.getNumRoutes() + plan.getNumLines();var description = ['從' + start];var addEndTitle = true;for (var i = 0; i < total; i++) {if (i % 2 == 0) {// i為偶數// 處理第一個步行描述邏輯if (i / 2 == 0) {if (plan.getRoute(i / 2).getDistance(false) == 0) {description = ['從'];}}// 處理最后一個步行描述邏輯if (i / 2 == plan.getNumRoutes() - 1) {if (plan.getRoute(i / 2).getDistance(false) == 0) {addEndTitle = false;}}if (plan.getRoute(i / 2).getDistance(false) > 0) {description.push('步行約' + plan.getRoute(i / 2).getDistance(true) + '至');}} else {// i為奇數var line = plan.getLine((i - 1) / 2);if (i == 0) {description.push(line.getGetOnStop().title + ', ');}if (i > 0) {if (plan.getRoute((i - 1) / 2).getDistance(false) > 0) {description.push(line.getGetOnStop().title + ', ');}}description.push('乘坐' + line.title + ', ');description.push('經過' + line.getNumViaStops() + '站');description.push('在' + line.getGetOffStop().title + '站下車,');}}if (addEndTitle) {description.push(end + '。');}// 替換可能出現的末尾位置的逗號var descriptionStr = description.join('').replace(/\uff0c$/, '。');}} });transit.search('北京大學', '北京交通大學');變量descriptionStr的內容為:“從北京大學步行約60米至北京大學西門, 乘坐運通106(中央黨校北門-田村北路), 經過6站在中國農業科學院站下車,乘坐26(二里莊-西便門), 經過4站在北京交通大學站下車。”。
?
回調函數詳解
前面的幾個例子我們使用了onSearchComplete回調函數,在API中還提供了如下幾個回調函數,它們的含義和觸發時機如下:
- onMarkersSet:如果設置了渲染的地圖,則API自動添加標注后會觸發此函數。
- onPolylinesSet:如果設置了渲染的地圖,則API自動添加線路覆蓋物后會觸發此函數。
- onInfoHtmlSet:如果設置了渲染地圖,當用戶點擊標注彈出信息窗口時會觸發此函數。
- onResultsHtmlSet:如果設置了渲染側欄,則API填充完HTML后會觸發此函數。
轉載于:https://www.cnblogs.com/Jasson-he/p/7424052.html
《新程序員》:云原生和全面數字化實踐50位技術專家共同創作,文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的百度地图API详解之公交导航的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python 读取单所有json数据写入
- 下一篇: 使用SharedPreferences进