百度地圖API之如何制作公交導(dǎo)航
前面我們介紹過駕車導(dǎo)航了，今天來說說公交導(dǎo)航。
什么是公交導(dǎo)航
公交導(dǎo)航功能是告訴使用者從A到B的公交出行方案，而不是某條具體的公交線路信息，這一點(diǎn)需要廣大開發(fā)者注意。
公交導(dǎo)航功能通過類TransitRoute來實(shí)現(xiàn)，這里需要說說為啥不是BusRoute，而是TransitRoute。百度提供的是公共交通導(dǎo)航，公共交通不僅僅涉及bus，可能還會(huì)有地鐵、渡輪甚至以后的飛機(jī)火車，所以這里使用的是public transit中的transit進(jìn)行描述。
一個(gè)簡(jiǎn)單的例子
我們還是從一個(gè)簡(jiǎn)單的例子開始：
- var transit = new BMap.TransitRoute('北京', {
- renderOptions: {
- map: map,
- panel: 'panel'
- }
- });
- transit.search('頤和園', '西單');
代碼通過renderOptions設(shè)置渲染的地圖實(shí)例和側(cè)欄面板容器的id，其中map是已經(jīng)實(shí)例化好的地圖，panel為已經(jīng)準(zhǔn)備好的div元素的id。我們會(huì)看到如下結(jié)果：
地圖上顯示了一個(gè)方案，在面板中列出了所有方案的描述，點(diǎn)擊不同的方案地圖會(huì)予以展示。除了使用字符串類型以外，還可以提供坐標(biāo)進(jìn)行查詢，這樣可以得到更精確的結(jié)果。比如從“麥當(dāng)勞”到“肯德基”這樣的路線查詢就不會(huì)得到結(jié)果，因?yàn)锳PI不知道是從哪個(gè)麥當(dāng)勞到哪個(gè)肯德基。下面的示例使用了坐標(biāo)進(jìn)行搜索。
- transit2.search(new BMap.Point(116.315157,39.987946),
- new BMap.Point(116.371499,39.880394));
下面是使用坐標(biāo)作為參數(shù)進(jìn)行查詢得到的結(jié)果：
注意，由于提供的是坐標(biāo)，所以起點(diǎn)和終點(diǎn)沒有具體的地點(diǎn)描述。
自定義覆蓋物展示
如果你不滿意API提供的默認(rèn)線路的顏色和標(biāo)注的樣式，你也可以選擇通過通過數(shù)據(jù)接口自行創(chuàng)建。注意，自己創(chuàng)建覆蓋物時(shí)，點(diǎn)擊列表中的方案將不會(huì)更新地圖區(qū)域，因?yàn)榇藭r(shí)地圖區(qū)域的元素都是由開發(fā)者自行創(chuàng)建的。在使用數(shù)據(jù)接口之前，先通過一個(gè)結(jié)構(gòu)圖來了解一個(gè)完整的公交方案的各個(gè)組成部分，以方便理解：
一個(gè)不需要換乘的公交方案是由：起點(diǎn)、起點(diǎn)到上車站的步行線路、上車站到下車站的公交線路以及下車站到終點(diǎn)的步行線路構(gòu)成。當(dāng)然有可能起點(diǎn)和上車站是重合的，或者終點(diǎn)和下車站是重合的，此時(shí)步行線路長(zhǎng)度就為0(起點(diǎn)或終點(diǎn)本身就為公交站的時(shí)候)。如果有換乘，那么每次換乘中的下車站到上車站也有步行線路(如上圖的第二個(gè)方案所示)。
所以不論公交方案具體是什么樣，在數(shù)據(jù)上的表示都是一致的：
◆ 直達(dá)方案：2條步行線路 + 1條公交線路
◆ 換乘一次方案：3條步行線路 + 2條公交線路
◆ 換乘兩次方案：4條步行線路 + 3條公交線路
以此類推。
API中通過TransitRouteResult來描述公交導(dǎo)航結(jié)果，通過TransitRoutePlan來描述一條公交方案。那么怎么獲取公交導(dǎo)航結(jié)果和具體的方案的信息呢?請(qǐng)看下面的示例：
- var transit = new BMap.TransitRoute('北京', {
- onSearchComplete: function(result) {
- if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
- // 從結(jié)果對(duì)象中獲取起點(diǎn)和終點(diǎn)信息
- var start = result.getStart();
- var end = result.getEnd();
- addStart(start.point, start.title);
- addEnd(end.point, end.title);
- // 直接獲取***個(gè)方案
- var plan = result.getPlan(0);
- // 遍歷所有步行線路
- for (var i = 0; i < plan.getNumRoutes(); i++) {
- if (plan.getRoute(i).getDistance(false) > 0) {
- // 判斷只有大于0的步行線路才會(huì)繪制
- addWalkRoute(plan.getRoute(i).getPath());
- }
- }
- // 遍歷所有公交線路
- var allLinePath = [];
- for (i = 0; i < plan.getNumLines(); i++) {
- allLinePathallLinePath = allLinePath.concat(plan.getLine(i).getPath());
- addLine(plan.getLine(i).getPath());
- }
- // ***根據(jù)公交線路的點(diǎn)設(shè)置地圖視野
- map.setViewport(allLinePath);
- }
- }
- });
- transit.search('清華大學(xué)', '北京交通大學(xué)');
- // 添加起點(diǎn)覆蓋物
- 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)
- })}));
- }
- // 添加終點(diǎn)覆蓋物
- 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屬性設(shè)置了回調(diào)函數(shù)，一旦檢索完成這個(gè)回調(diào)函數(shù)就會(huì)被調(diào)用。在回調(diào)函數(shù)開始我們先判斷檢索是否成功，如果成功表示至少有一條公交方案返回，這里我們先通過結(jié)果對(duì)象獲取起點(diǎn)和終點(diǎn)，接著直接獲取***條方案，遍歷方案中所有步行線路和公交線路并繪制在地圖上，***我們根據(jù)公交線路的點(diǎn)來設(shè)置一個(gè)合適的地圖視野。
你會(huì)在瀏覽器中得到如下效果：
在獲取結(jié)果對(duì)象時(shí)，除了通過回調(diào)函數(shù)參數(shù)獲取以外，還可以通過TransitRoute的getResults方法獲得，需要注意的是，由于搜索過程是異步的，以下代碼的寫法將不會(huì)得到結(jié)果：
- transit.search('西單', '頤和園');
- var res = transit.getResults(); // undefined
因?yàn)閟earch方法調(diào)用結(jié)束后搜索結(jié)果并沒有立即返回。開發(fā)者可以在回調(diào)函數(shù)中調(diào)用此方法立即獲得結(jié)果，也可以等回調(diào)函數(shù)執(zhí)行完若干時(shí)間后再想獲取結(jié)果數(shù)據(jù)時(shí)調(diào)用。
自定義方案描述
通過TransitRoutePlan的getDescription可以獲得完整的方案描述，但是如果開發(fā)者想自行定義描述的形式則可通過數(shù)據(jù)接口進(jìn)行。例如：
- var transit = new BMap.TransitRoute('北京', {
- onSearchComplete: function(result) {
- if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
- // 從結(jié)果對(duì)象中獲取起點(diǎn)和終點(diǎn)信息
- var start = result.getStart().title;
- var end = result.getEnd().title;
- // 直接獲取***個(gè)方案
- var plan = result.getPlan(0);
- // 獲取步行線路與公交線路個(gè)數(shù)總和，用于遍歷
- var total = plan.getNumRoutes() + plan.getNumLines();
- var description = ['從' + start];
- var addEndTitle = true;
- for (var i = 0; i < total; i++) {
- if (i % 2 == 0) {
- // i為偶數(shù)
- // 處理***個(gè)步行描述邏輯
- if (i / 2 == 0) {
- if (plan.getRoute(i / 2).getDistance(false) == 0) {
- description = ['從'];
- }
- }
- // 處理***一個(gè)步行描述邏輯
- 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為奇數(shù)
- var line = plan.getLine((i - 1) / 2);
- description.push(line.getGetOnStop().title + ', ');
- description.push('乘坐' + line.title + ', ');
- description.push('經(jīng)過' + line.getNumViaStops() + '站');
- description.push('在' + line.getGetOffStop().title + '站下車，');
- }
- }
- if (addEndTitle) {
- description.push(end + '。');
- }
- // 替換可能出現(xiàn)的末尾位置的逗號(hào)
- var descriptiondescriptionStr = description.join('').replace(/\uff0c$/, '。');
- }
- }
- });
- transit.search('清華大學(xué)', '北京交通大學(xué)');
變量descriptionStr的內(nèi)容為：“從清華大學(xué)步行約830米至五道口, 乘坐地鐵13號(hào)線(東直門-西直門), 經(jīng)過3站在西直門站下車，步行約310米至城鐵西直門站, 乘坐運(yùn)通105(上地環(huán)島東-中苑賓館), 經(jīng)過2站在北京交通大學(xué)站下車。”
回調(diào)函數(shù)詳解
前面的幾個(gè)例子我們使用了onSearchComplete回調(diào)函數(shù)，在API中還提供了如下幾個(gè)回調(diào)函數(shù)，它們的含義和觸發(fā)時(shí)機(jī)如下：
◆ onMarkersSet：如果設(shè)置了渲染的地圖，則API自動(dòng)添加標(biāo)注后會(huì)觸發(fā)此函數(shù)。
◆ onPolylinesSet：如果設(shè)置了渲染的地圖，則API自動(dòng)添加線路覆蓋物后會(huì)觸發(fā)此函數(shù)。
◆ onInfoHtmlSet：如果設(shè)置了渲染地圖，當(dāng)用戶點(diǎn)擊標(biāo)注彈出信息窗口時(shí)會(huì)觸發(fā)此函數(shù)。
◆ onResultsHtmlSet：如果設(shè)置了渲染側(cè)欄，則API填充完HTML后會(huì)觸發(fā)此函數(shù)。
原文：http://www.cnblogs.com/jz1108/archive/2011/10/21/2220574.html
【編輯推薦】
