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

時間  2019-12-06
標籤 高德地圖API 開始 api 路線 規劃 駕車 公交 步行 欄目 JavaScript 简体版
原文   原文鏈接

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

回答：css

一、路線規劃，指的是爲用戶提供3條路線推薦。【高德】在提供路線規劃的時候，會提供用戶自定義路線規劃功能，這是別家沒有作到的。導航，指的是爲駕車用戶提示路口信息，向左向右，進入匝道等信息。html

二、咱們這裏說的步行導航和駕車導航，嚴格的說，應該是路線規劃。從A地到B地，若是是駕車，路線規劃會將公路路網作爲搜索數據；若是是步行，過街天橋、地下通道、人行道作爲搜索數據。java

-------------------------------------------------------------------------------------------------------web

 

1、路線規劃——駕車數據庫

 一、駕車路線規劃api

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

LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC

 

咱們在這裏採起駕車插件來作。代碼：ui

//駕車導航 
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); //根據起終點座標規劃駕車路線 
 }); }

示意圖：編碼

 

二、駕車最後一千米步行

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

代碼：

//起點到路線的起點 路線的終點到終點 繪製無道路部分 
    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] });

 

效果圖：

 

三、駕車導航拖拽效果

若是要可拖拽的效果，須要使用另一個插件，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

 

2、路線規劃——公交

 一、公交導航

公交導航不只是路線相關的，仍是根據公交車路線數據，進行查詢。使用到插件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); }); }); }

 

效果圖：

 

二、公交線路查詢，如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); }); }); }

 

示意圖：

 

三、經過站點，查公交線路

好比，我在北京東直門，想知道東直門都有哪些公交路線。使用服務插件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

 

3、路線規劃——步行

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

 

代碼：

//步行導航 
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

 

4、小結

駕車，公交，步行的區別

一、從效果圖裏能夠看出，這三種路線規劃是搜索的不一樣數據庫。

二、他們的服務插件不同，都是經過【高德服務插件】進行調用。比原生API接口封裝得更加完善，使用起來更加簡單。

 

5、所有源代碼

<!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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程