【高德地圖API】從零開始學高德JS API（五）路線規劃——駕車|公交|步行

酸奶小妹發表於2014-05-30

地圖APIJS

先來看兩個問題：路線規劃與導航有什麼區別？步行導航與駕車導航有什麼區別？

回答：

1、路線規劃，指的是為使用者提供3條路線推薦。【高德】在提供路線規劃的時候，會提供使用者自定義路線規劃功能，這是別家沒有做到的。導航，指的是為駕車使用者提示路口資訊，向左向右，進入匝道等資訊。

2、我們這裡說的步行導航和駕車導航，嚴格的說，應該是路線規劃。從A地到B地，如果是駕車，路線規劃會將公路路網做為搜尋資料；如果是步行，過街天橋、地下通道、人行道做為搜尋資料。

-------------------------------------------------------------------------------------------------------

一、路線規劃——駕車

1、駕車路線規劃

有三種策略，分別是最短時間、最少費用、最短路徑、規避擁堵（參考了實時交通資料，這個比較NB）。

LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC

我們在這裡採取駕車外掛來做。程式碼：

//駕車導航  
function driving_route() {  
    clearMap();
    mapObj.plugin(["AMap.Driving"], function() {  
        var DrivingOption = {  
            policy: AMap.DrivingPolicy.LEAST_TIME   
        };          
        MDrive = new AMap.Driving(DrivingOption); //構造駕車導航類   
        AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回導航查詢結果  
        MDrive.search(start_xy, end_xy); //根據起終點座標規劃駕車路線  
    });      
}

示意圖：

2、駕車最後一公里步行

在最開始一段，和最後一段步行距離的時候，可以用虛線來表示。

程式碼：

    //起點到路線的起點 路線的終點到終點 繪製無道路部分  
    var extra_path1 = new Array();  
    extra_path1.push(start_xy);  
    extra_path1.push(steps[0].path[0]);  
    var extra_line1 = new AMap.Polyline({  
        map: mapObj,  
        path: extra_path1,  
        strokeColor: "#9400D3",  
        strokeOpacity: 0.7,  
        strokeWeight: 4,  
        strokeStyle: "dashed",   //虛線
        strokeDasharray: [10, 5]  
    });  
  
    var extra_path2 = new Array();  
    var path_xy = steps[(steps.length-1)].path;  
    extra_path2.push(end_xy);  
    extra_path2.push(path_xy[(path_xy.length-1)]);  
    var extra_line2 = new AMap.Polyline({  
        map: mapObj,  
        path: extra_path2,  
        strokeColor: "#9400D3",  
        strokeOpacity: 0.7,  
        strokeWeight: 4,  
        strokeStyle: "dashed",  //虛線
        strokeDasharray: [10, 5]  
    });

效果圖：

3、駕車導航拖拽效果

如果要可拖拽的效果，需要使用另外一個外掛，AMap.DragRoute。

程式碼：

//可拖拽的駕車導航
function driving_route_drag(){
    clearMap();
    var path = [start_xy,end_xy];
    mapObj.plugin("AMap.DragRoute",function(){  
        MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //構造拖拽導航類  
        MDrive.search(); //查詢導航路徑並開啟拖拽導航  
    });
}

示意圖：

示例檢視：http://zhaoziang.com/amap/zero_5_1.html

二、路線規劃——公交

1、公交導航

公交導航不僅是路線相關的，還是根據公交車路線資料，進行查詢。使用到外掛AMap.LineSearch。

程式碼：

//公交線路查詢
function lineSearch() {  
    clearMap();
    //載入公交線路查詢外掛  
    //例項化公交線路查詢類，只取回一條路線  
    mapObj.plugin(["AMap.LineSearch"], function() {  
       var linesearch = new AMap.LineSearch({  
            pageIndex:1,  
            city:'北京',  
            pageSize:1,  
            extensions:'all'  
        });  
        //搜尋“518”相關公交線路  
        linesearch.search('518');  
        AMap.event.addListener(linesearch, "complete", lineSearch_Callback);  
        AMap.event.addListener(linesearch, "error", function(e){alert(e.info);  
        });  
    });  
}

效果圖：

2、公交線路查詢，如518

查詢公交線路，需要註明城市。每個城市都可能有518路線，對吧。

程式碼：

//公交線路查詢
function lineSearch() {  
    clearMap();
    //載入公交線路查詢外掛  
    //例項化公交線路查詢類，只取回一條路線  
    mapObj.plugin(["AMap.LineSearch"], function() {  
       var linesearch = new AMap.LineSearch({  
            pageIndex:1,  
            city:'北京',  
            pageSize:1,  
            extensions:'all'  
        });  
        //搜尋“518”相關公交線路  
        linesearch.search('518');  
        AMap.event.addListener(linesearch, "complete", lineSearch_Callback);  
        AMap.event.addListener(linesearch, "error", function(e){alert(e.info);  
        });  
    });  
}

示意圖：

3、通過站點，查公交線路

比如，我在北京東直門，想知道東直門都有哪些公交路線。使用服務外掛AMap.StationSearch。

程式碼：

//公交站點查詢 
function stationSearch() {  
    clearMap();
    //載入公交站點查詢外掛  
    mapObj.plugin(["AMap.StationSearch"], function() {        
        //例項化公交站點查詢類  
        var station = new AMap.StationSearch({  
            pageIndex: 1, //頁碼  
            pageSize: 10, //單頁顯示結果條數  
            city:'010'    //確定搜尋城市  
        });   
        station.search('東直門'); //查詢  
        AMap.event.addListener(station, 'complete', stationSearch_CallBack);          
        AMap.event.addListener(station, 'error', function(e) {alert(e.info);});  
    });  
}

示例圖：

示例檢視：http://zhaoziang.com/amap/zero_5_1.html

三、路線規劃——步行

步行，可以過天橋啊，地下通道啊，穿過小區啊，不能走高速公路啊，等特點。

程式碼：

//步行導航  
function walking_route() {  
    var MWalk;  
    mapObj.plugin(["AMap.Walking"], function() {          
        MWalk = new AMap.Walking(); //構造路線導航類   
        AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回導航查詢結果  
        MWalk.search(start_xy, end_xy); //根據起終點座標規劃步行路線  
    });  
}

效果圖：

示例檢視：http://zhaoziang.com/amap/zero_5_1.html

四、小結

駕車，公交，步行的區別

1、從效果圖裡可以看出，這三種路線規劃是搜尋的不同資料庫。

2、他們的服務外掛不一樣，都是通過【高德服務外掛】進行呼叫。比原生API介面封裝得更加完善，使用起來更加簡單。

五、全部原始碼

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地圖路線規劃服務</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"></script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
    <div id="iControlbox">
        <p>座標：<span id="lnglats">&nbsp;</span></p>
        <ul>
            <li>
                <button onclick="javascript:driving_route();">駕車路線規劃</button>
                <button onclick="javascript:driving_route_drag();">可拖拽外掛</button>
            </li>
            <li>
                <button onclick="javascript:transfer_route();">公交路線規劃</button>
                <button onclick="javascript:lineSearch();">518路公交車</button>
                <button onclick="javascript:stationSearch();">東直門站點</button>
            </li>
            <li>
                <button onclick="javascript:walking_route();">步行路線規劃</button>
            </li>
            <li>
                <button onclick="javascript:clearMap();">清空地圖</button>
            </li>
        </ul>
    </div>
    <div id="result"></div>
<!-- tongji begin-->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- tongji end -->
</body>
<script language="javascript">
function setLi(id1,id2){
    document.getElementById("box1").style.display = "none";
    document.getElementById("box2").style.display = "none";
    document.getElementById("box3").style.display = "none";
    document.getElementById(id1).style.display = "block";

    document.getElementById("iLi1").style.background = "#eee";
    document.getElementById("iLi2").style.background = "#eee";
    document.getElementById("iLi3").style.background = "#eee";
    document.getElementById(id2).style.background = "#fff";
}

var mapObj;
var route_text
var steps;
var polyline;
var MDrive;
var btContent = new Array(); //結果表格陣列
var resultStr;//結果拼接string
var resLine  = ''; //結果表格物件
//初始化地圖物件，載入地圖
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
    center:new AMap.LngLat(116.397428,39.90923), //地圖中心點
    level:11  //地圖顯示的比例尺級別
    });
    AMap.event.addListener(mapObj,'click',getLnglat); //點選事件
}
//滑鼠點選，獲取經緯度座標
function getLnglat(e){
    var x = e.lnglat.getLng();
    var y = e.lnglat.getLat();
    document.getElementById("lnglats").innerHTML = x + "," + y;
}
//清空地圖
function clearMap(){
    mapObj.clearMap();
    document.getElementById("result").innerHTML = '&nbsp;';
}
//起、終點
var start_xy = new AMap.LngLat(116.379018,39.865026);
var end_xy = new AMap.LngLat(116.321139, 39.896028);
//駕車導航
function driving_route() {
    clearMap();
    mapObj.plugin(["AMap.Driving"], function() {
        var DrivingOption = {
            //駕車策略，包括 LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
            policy: AMap.DrivingPolicy.LEAST_TIME
        };
        MDrive = new AMap.Driving(DrivingOption); //構造駕車導航類
        AMap.event.addListener(MDrive, "complete", driving_routeCallBack); //返回導航查詢結果
        MDrive.search(start_xy, end_xy); //根據起終點座標規劃駕車路線
    });
}
//可拖拽的駕車導航
function driving_route_drag(){
    clearMap();
    var path = [start_xy,end_xy];
    mapObj.plugin("AMap.DragRoute",function(){
        MDrive = new AMap.DragRoute(mapObj, path, AMap.DrivingPolicy.LEAST_FEE); //構造拖拽導航類
        MDrive.search(); //查詢導航路徑並開啟拖拽導航
    });
}
//導航結果展示
function driving_routeCallBack(data) {
    var routeS = data.routes;
    if (routeS.length <= 0) {
        document.getElementById("result").innerHTML = "未查詢到任何結果!<br />建議：<br />1.請確保所有字詞拼寫正確。<br />2.嘗試不同的關鍵字。<br />3.嘗試更寬泛的關鍵字。";
    }
    else{
        route_text="";
        for(var v =0; v< routeS.length;v++){
            //駕車步驟數
            steps = routeS[v].steps
            var route_count = steps.length;
            //行車距離（米）
            var distance = routeS[v].distance;
            //拼接輸出html
            for(var i=0 ;i< steps.length;i++){
                route_text += "<tr><td align=\"left\" onMouseover=\"driveDrawFoldline('" + i + "')\">" + i +"." +steps[i].instruction  + "</td></tr>";
            }
        }
        //輸出行車路線指示
        route_text = "<table cellspacing=\"5px\"><tr><td style=\"background:#e1e1e1;\">路線</td></tr><tr><td><img src=\"http://code.mapabc.com/images/start.gif\" />&nbsp;&nbsp;北京南站</td></tr>" + route_text + "<tr><td><img src=\"http://code.mapabc.com/images/end.gif\" />&nbsp;&nbsp;北京西站</td></tr></table>";
        document.getElementById("result").innerHTML = route_text;
        drivingDrawLine();
    }
}
//繪製駕車導航路線
function drivingDrawLine(s) {
    //起點、終點圖示
    var sicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size:new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -180)
    });
    var startmarker = new AMap.Marker({
        icon : sicon, //複雜圖示
        visible : true,
        position : start_xy,
        map:mapObj,
        offset : {
            x : -16,
            y : -40
        }
    });
    var eicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size:new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -134)
    });
    var endmarker = new AMap.Marker({
        icon : eicon, //複雜圖示
        visible : true,
        position : end_xy,
        map:mapObj,
        offset : {
            x : -16,
            y : -40
        }
    });
    //起點到路線的起點 路線的終點到終點 繪製無道路部分
    var extra_path1 = new Array();
    extra_path1.push(start_xy);
    extra_path1.push(steps[0].path[0]);
    var extra_line1 = new AMap.Polyline({
        map: mapObj,
        path: extra_path1,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",   //虛線
        strokeDasharray: [10, 5]
    });

    var extra_path2 = new Array();
    var path_xy = steps[(steps.length-1)].path;
    extra_path2.push(end_xy);
    extra_path2.push(path_xy[(path_xy.length-1)]);
    var extra_line2 = new AMap.Polyline({
        map: mapObj,
        path: extra_path2,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",  //虛線
        strokeDasharray: [10, 5]
    });

    var drawpath = new Array();
    for(var s=0; s<steps.length; s++){
        drawpath = steps[s].path;
        var polyline = new AMap.Polyline({
            map: mapObj,
            path: drawpath,
            strokeColor: "#9400D3",
            strokeOpacity: 0.7,
            strokeWeight: 4,
            strokeDasharray: [10, 5]
        });
    }
    mapObj.setFitView();
}
//繪製駕車導航路段
function driveDrawFoldline(num){
    var drawpath1 = new Array();
    drawpath1 = steps[num].path;
    if(polyline != null){
        polyline.setMap(null);
    }
    polyline = new AMap.Polyline({
            map: mapObj,
            path: drawpath1,
            strokeColor: "#FF3030",
            strokeOpacity: 0.9,
            strokeWeight: 4,
            strokeDasharray: [10, 5]
        });

    mapObj.setFitView(polyline);
}
//公交導航
function transfer_route() {
    clearMap();
    var trans;
    //載入公交換乘外掛
    mapObj.plugin(["AMap.Transfer"], function() {
        transOptions = {
            city: '北京市',                            //公交城市
            policy: AMap.TransferPolicy.LEAST_TIME //乘車策略
        };
        //構造公交換乘類
        trans = new AMap.Transfer (transOptions);
        //返回導航查詢結果
        AMap.event.addListener(trans, "complete", transCallBack);
        //顯示錯誤資訊
        AMap.event.addListener(trans, "error", function(e) {alert(e.info);});
        //根據起、終點座標查詢公交換乘路線
        trans.search(start_xy,end_xy);
    });
}
function transCallBack(data) {
    var btCount       = data.count;
    var btPlans       = data.plans;
    var btOrigin      = data.origin;
    var btDestination = data.destination;
    var btTaxiCost    = data.taxi_cost;
    var startName     = "北京南站"; //可以使用地理編碼解析起點和終點座標
    var endName       = "北京站";
    var BusArr        = [];
    var WalkArr       = [];
    var onbus         = new Array();
    var onwalk        = new Array();
    //結果輸出用表格展現，輸出表格頭
    var resTableHeader = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td width=\"80\" style=\" border-left:1px solid #fff; background:#e1e1e1;\">　乘車方案</td><td width=\"80\" style=\" border-left:1px solid #fff; background:#e1e1e1;\">　導航資訊</td></tr>";
    btContent.push(resTableHeader);
    //遍歷每種換乘方案
    for (var i = 0; i < btPlans.length; i++) {
        var btDistance  = btPlans[i].distance;
        var btseg       = btPlans[i].segments;
        var lineNameArr = new Array();
        var resLine     = "";
        var naviInfo    = '';
        var lineName;
        for(var j = 0; j < btseg.length; j++) {
            naviInfo += btseg[j].instruction + "<br/>";
            if(btseg[j].transit_mode =="WALK") {
                if(i===0) {
                    WalkArr.push(btseg[j].transit.path);
                }
            }
            else {
                lineName = btseg[j].transit.lines[0].name;
                lineNameArr.push(lineName);
                if(i===0) {
                    BusArr.push(btseg[j].transit.path);
                }
            }
        }
        lineName = lineNameArr.join("-->");
        drawBuschangeLine(btOrigin,btDestination,BusArr,WalkArr);
        //結果輸出用表格展現，輸出表格內容
        resLine = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"
        + "<tr><td width=\"80\" class=\"change_blue\">"+ lineName +"</td><td width=\"80\" class=\"change_blue\" >"
        + Getdistance(btDistance) + "</td></tr>" + "<tr><td width=\"80\" class=\"change_blue\" ></td><td width=\"80\"><img src=\"http://webapi.amap.com/images/start.gif\" /> <b>起點</b> " + startName + "</td></tr>" + "<tr><td width=\"80\" class=\"change_blue\"></td><td width=\"80\" class=\"change_blue\">"+ naviInfo +"</td></tr>"+ "<tr><td width=\"80\" class=\"change_blue\" ></td><td width=\"80\"><img src=\"http://webapi.amap.com/images/end.gif\" /> <b>終點</b> " + endName + "</td></tr>";
        btContent.push(resLine);
     }
    resultStr = btContent.join("");
     //寫到result這個div
    document.getElementById("result").innerHTML = resultStr;
    //取出需要加換乘、步行圖示的位置，這裡僅畫出第一個換乘方案
    var sinseg = btPlans[0].segments;
    for(var a in sinseg) {
        if(sinseg[a].transit_mode =="WALK") {
            onwalk.push(sinseg[a].transit.origin);
        }
        else {
            onbus.push(sinseg[a].transit.on_station.location);
        }
    }
    addMarker(onbus);
    mapObj.setFitView();
}
//距離，米換算為千米
function Getdistance(len) {
    if (len <= 1000) {
        var s = len;
        return s + "米";
    } else {
        var s = Math.round(len / 1000);
        return "約" + s + "公里";
    }
}
//繪製路線，僅第一條
function drawBuschangeLine(startPot,endPot,BusArr,WalkArr) {
    //自定義起點，終點圖示
     var sicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size: new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -180)
    });
     var eicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size: new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -134)
    });
    //繪製起點，終點
    var stmarker = new AMap.Marker({
        map:mapObj,
        position:new AMap.LngLat(startPot.lng,startPot.lat), //基點位置
        icon:sicon, //複雜圖示
        offset:{x:-16,y:-34} //相對於基點的位置
    });
    var endmarker = new AMap.Marker({
        map:mapObj,
        position:new AMap.LngLat(endPot.lng,endPot.lat), //基點位置
        icon:eicon, //複雜圖示
        offset:{x:-16,y:-34} //相對於基點的位置
    });
    //繪製乘車的路線
    for(var j in BusArr) {
        busPolyline = new AMap.Polyline({
            map:mapObj,
            path:BusArr[j],
            strokeColor:"#005cb5",//線顏色
            strokeOpacity:0.8,//線透明度
            strokeWeight:6//線寬
        });
    }
    //繪製步行的路線
    for (var i in WalkArr) {
        walkPolyline = new AMap.Polyline({
            map:mapObj,
            path:WalkArr[i],
            strokeColor : "#6EB034", //線顏色
            strokeOpacity : 0.6, //線透明度
            strokeWeight : 6//線寬
        });
    }

}
function addMarker(busmar) {
    for (var i = 0; i < busmar.length; i++) {
        var busmarker = new AMap.Marker({
            icon : new AMap.Icon({
                image: "http://api.amap.com/Public/images/js/busroute.png",
                size: new AMap.Size(20, 20),
                imageOffset: new AMap.Pixel(-33, -3)
            }),
            position : busmar[i],
            offset : {
                x : -25,
                y : -25
            },
            map:mapObj
        });
    }
}
//公交線路查詢
function lineSearch() {
    clearMap();
    //載入公交線路查詢外掛
    //例項化公交線路查詢類，只取回一條路線
    mapObj.plugin(["AMap.LineSearch"], function() {
       var linesearch = new AMap.LineSearch({
            pageIndex:1,
            city:'北京',
            pageSize:1,
            extensions:'all'
        });
        //搜尋“518”相關公交線路
        linesearch.search('518');
        AMap.event.addListener(linesearch, "complete", lineSearch_Callback);
        AMap.event.addListener(linesearch, "error", function(e){alert(e.info);
        });
    });
}
function lineSearch_Callback(data) {
    var lineArr  = data.lineInfo;
    var lineNum  = data.lineInfo.length;
    if(lineNum == 0) {
        resLine = data.info;
    }
    else {
        resLine += "<div id=\"divid" + i + "\"><table>";
        for(var i = 0; i < lineNum; i++) {
            var lineName = lineArr[i].name;
            var lineCity = lineArr[i].city;
            var distance = lineArr[i].distance;
            var company  = lineArr[i].company;
            var stime    = lineArr[i].stime;
            var etime    = lineArr[i].etime;
            var pathArr  = lineArr[i].path;
            var stops    = lineArr[i].via_stops;
            var startPot = stops[0].location;
            var endPot   = stops[stops.length-1].location;
            //結果輸出用DIV展現，輸出內容
            resLine += "<tr><td><h3><font color=\"#00a6ac\">" + lineName + "</font></h3></td></tr>";
            resLine += "<tr><td>首末車時間：" + stime.substring(0, 2) + ":" + stime.substring(2, 4) + '-' + etime.substring(0, 2) + ":" + etime.substring(2, 4) + "；" + "全長：" + distance + "公里;" + "所屬公司：" + company+"</td></tr>";
           //繪製第一條路線
            if(i==0) drawbusLine(startPot,endPot,pathArr);
        }
        resLine += "</table></div>"
        document.getElementById('result').innerHTML = resLine;
    }
}
//繪製路線
function drawbusLine(startPot,endPot,BusArr) {
    //自定義起點，終點圖示
     var sicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size: new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -180)
    });
     var eicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size: new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -134)
    });
    //繪製起點，終點
    var stmarker = new AMap.Marker({
        map:mapObj,
        position:new AMap.LngLat(startPot.lng,startPot.lat), //基點位置
        icon:sicon, //複雜圖示
        offset:{x:-16,y:-34}, //相對於基點的位置
        zIndex:10
    });
    var endmarker = new AMap.Marker({
        map:mapObj,
        position:new AMap.LngLat(endPot.lng,endPot.lat), //基點位置
        icon:eicon, //複雜圖示
        offset:{x:-16,y:-34}, //相對於基點的位置
        zIndex:10
    });
    //繪製乘車的路線
    busPolyline = new AMap.Polyline({
        map:mapObj,
        path:BusArr,
        strokeColor:"#005cb5",//線顏色
        strokeOpacity:0.8,//線透明度
        strokeWeight:6//線寬
    });
    mapObj.setFitView();
}
//公交站點查詢
function stationSearch() {
    clearMap();
    //載入公交站點查詢外掛
    mapObj.plugin(["AMap.StationSearch"], function() {
        //例項化公交站點查詢類
        var station = new AMap.StationSearch({
            pageIndex: 1, //頁碼
            pageSize: 10, //單頁顯示結果條數
            city:'010'    //確定搜尋城市
        });
        station.search('東直門'); //查詢
        AMap.event.addListener(station, 'complete', stationSearch_CallBack);
        AMap.event.addListener(station, 'error', function(e) {alert(e.info);});
    });
}
/*
 *公交站點查詢返回資料解析
 */
function stationSearch_CallBack(searchResult) {
    clearMap();
    var resultStr    = ""; //結果拼接String
    var resultString = searchResult.info;
    var stationArr   = searchResult.stationInfo;
    var searchNum    = stationArr.length;
    var iMarker    = searchResult.location;

    if(searchNum > 0) {
        resultStr += "<div id=\"divid" + i + "\"><table>";
        for(var i=0; i<searchNum; i++) {
            //結果輸出用表格展現
            resultStr += "<tr><td><h3><font color=\"#00a6ac\">" + stationArr[i].name + "</font></h3></td></tr>";

            resultStr += "<tr><td>途徑該站點的公交線路:</td></tr><tr><td>";
            var stationBusArr = stationArr[i].buslines;
            for(var j =0; j<stationBusArr.length; j++) {
                resultStr += stationBusArr[j].name + "<br/>";
            }
        }
        resultStr += "</td></tr></table></div>"
        document.getElementById("result").innerHTML = resultStr;

        var stmarker = new AMap.Marker({
            map:mapObj,
            position:iMarker
        });
    }
    else {
        document.getElementById("result").innerHTML = resultString;
    }
}
//步行導航
function walking_route() {
    var MWalk;
    mapObj.plugin(["AMap.Walking"], function() {
        MWalk = new AMap.Walking(); //構造路線導航類
        AMap.event.addListener(MWalk, "complete", walk_routeCallBack); //返回導航查詢結果
        MWalk.search(start_xy, end_xy); //根據起終點座標規劃步行路線
    });
}
//導航結果展示
function walk_routeCallBack(data) {
    var routeS = data.routes;
        if (routeS.length <= 0) {
            document.getElementById("result").innerHTML = "未查詢到任何結果!<br />建議：<br />1.請確保所有字詞拼寫正確。<br />2.嘗試不同的關鍵字。<br />3.嘗試更寬泛的關鍵字。";
        }
        else {
            route_text="";
            for(var v =0; v< routeS.length;v++){
                //步行導航路段數
                steps = routeS[v].steps;
                var route_count = steps.length;
                //步行距離（米）
                var distance = routeS[v].distance;
                //拼接輸出html
                for(var i=0 ;i< steps.length;i++) {
                    route_text += "<tr><td align=\"left\" onMouseover=\"walkingDrawSeg('" + i + "')\">" + i +"." +steps[i].instruction  + "</td></tr>";
                }
            }
            //輸出步行路線指示
            route_text = "<table cellspacing=\"5 px\" ><tr><td style=\"background:#e1e1e1;\">路線</td></tr><tr><td><img src=\"http://code.mapabc.com/images/start.gif\" />&nbsp;&nbsp;北京南站</td></tr>" + route_text + "<tr><td><img src=\"http://code.mapabc.com/images/end.gif\" />&nbsp;&nbsp;北京站</td></tr></table>";
            document.getElementById("result").innerHTML = route_text;
            walkingDrawLine();
        }
}
//繪製步行導航路線
function walkingDrawLine() {
    //起點、終點圖示
    var sicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size:new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -180)
    });
    var startmarker = new AMap.Marker({
        icon : sicon, //複雜圖示
        visible : true,
        position : start_xy,
        map:mapObj,
        offset : {
            x : -16,
            y : -40
        }
    });
    var eicon = new AMap.Icon({
        image: "http://api.amap.com/Public/images/js/poi.png",
        size:new AMap.Size(44,44),
        imageOffset: new AMap.Pixel(-334, -134)
    });
    var endmarker = new AMap.Marker({
        icon : eicon, //複雜圖示
        visible : true,
        position : end_xy,
        map:mapObj,
        offset : {
            x : -16,
            y : -40
        }
    });
    //起點到路線的起點 路線的終點到終點 繪製無道路部分
    var extra_path1 = new Array();
    extra_path1.push(start_xy);
    extra_path1.push(steps[0].path[0]);
    var extra_line1 = new AMap.Polyline({
        map: mapObj,
        path: extra_path1,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });

    var extra_path2 = new Array();
    var path_xy = steps[(steps.length-1)].path;
    extra_path2.push(end_xy);
    extra_path2.push(path_xy[(path_xy.length-1)]);
    var extra_line2 = new AMap.Polyline({
        map: mapObj,
        path: extra_path2,
        strokeColor: "#9400D3",
        strokeOpacity: 0.7,
        strokeWeight: 4,
        strokeStyle: "dashed",
        strokeDasharray: [10, 5]
    });

    for(var s=0; s<steps.length; s++) {
        var drawpath = steps[s].path;
        var polyline = new AMap.Polyline({
            map: mapObj,
            path: drawpath,
            strokeColor: "#9400D3",
            strokeOpacity: 0.7,
            strokeWeight: 4
        });
    }
    mapObj.setFitView();
}
</script>
</html>

示例檢視：http://zhaoziang.com/amap/zero_5_1.html

【高德地圖API】從零開始學高德JS API（六）——座標轉換
2014-06-04
地圖APIJS
【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕
2014-07-09
地圖APIJS
【高德地圖API】從零開始學高德JS API（八）——地址解析與逆地址解析
2014-07-23
地圖APIJS
【高德地圖API】從零開始學高德JS API（一）地圖展現——仙劍地圖，麻點圖，街景，室內圖
2014-04-25
地圖APIJS
【高德地圖API】從零開始學高德JS API（三）覆蓋物——標註|折線|多邊形|資訊視窗|聚合marker|麻點圖|圖片覆蓋物
2014-05-14
地圖APIJS
【高德地圖API】從零開始學高德JS API（二）地圖控制元件與外掛——測距、圓形編輯器、滑鼠工具、地圖型別切換、鷹眼魚骨
2014-05-08
地圖APIJS控制元件型別
百度地圖api 自定義駕車線路規劃車輛實時定位
2017-04-14
地圖API
【高德地圖API】從零開始學高德JS API（四）搜尋服務——POI搜尋|自動完成|輸入提示|行政區域|交叉路口|自有資料檢索
2014-05-22
地圖APIJS
高德地圖導航和路徑規劃
2018-11-19
地圖
java接入高德地圖常用WEB API
2020-02-22
Java地圖WebAPI
在Vue中使用高德地圖API
2017-09-19
Vue地圖API
高德地圖 API 介面封裝 SDK
2017-12-12
地圖API封裝
js高德API定位
2018-07-31
JSAPI
【高德地圖API】如何獲得行政區域？如何製作行政規劃圖？
2014-06-03
地圖API
react中使用高德地圖的原生API
2019-06-28
React地圖API
對接高德地圖API的總結
2018-04-23
地圖API
百度地圖開發（五）之公交資訊檢索 + 路線規劃
2015-03-05
地圖
【高德地圖API】如何設定Marker的offset？
2016-11-22
地圖API
萬物RxJava(1)：封裝高德地圖API
2017-08-07
RxJava封裝地圖API
【高德地圖API】如何製作自己的旅遊地圖？
2014-04-22
地圖API
高德地圖JSAPI學習（一）
2021-09-09
地圖JSAPI
高德地圖系列web篇——目的地公交導航
2017-12-14
地圖Web
Vue 高德地圖 API Loca 如何使用連線線圖層、脈衝連線圖層
2022-03-25
Vue地圖API
【高德地圖API】匯潤做愛地圖技術大揭祕
2014-09-01
地圖API
【高德地圖API】如何設定Icon的imageSize？
2016-12-05
地圖API
高德地圖未來行程規劃在哪裡? 高德地圖預設出行時間的技巧教程
2020-09-09
地圖行程
【高德地圖API】一句話搞定webmap（一）——輕地圖元件
2014-08-12
地圖APIWeb元件
國內三大地圖（騰訊、高德、百度）路線規劃功能的整合
2021-11-12
地圖
高德地圖駕車導航記憶體優化原理與實戰
2021-01-22
地圖記憶體優化
高德地圖附近停車場服務
2017-06-20
地圖
高德地圖api標記點和線段重合點選響應問題
2024-03-08
地圖API
高德地圖開發彙總
2019-03-04
地圖
高德地圖首席科學家任小楓：視覺智慧在高德地圖的應用
2019-10-24
地圖視覺
高德地圖app怎麼使用北斗地圖? 高德地圖設定北斗地圖的教程
2020-06-23
地圖APP
高德地圖API中折線polyline不能跨越180度經度線的解決方案
2021-11-14
地圖API
高德地圖定位實現
2018-01-24
地圖
CocoaPods 操作高德地圖
2016-06-20
地圖
高德地圖警告解決
2014-03-17
地圖

【高德地圖API】從零開始學高德JS API（五）路線規劃——駕車|公交|步行

相關文章