【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

2025-01-02 技术教程

先来看两个问题：路线规划与导航有什么区别？步行导航与驾车导航有什么区别？

回答：

1、路线规划，指的是为用户提供3条路线推荐。【高德】在提供路线规划的时候，会提供用户自定义路线规划功能，这是别家没有做到的。导航，指的是为驾车用户提示路口信息，向左向右，进入匝道等信息。

2、我们这里说的步行导航和驾车导航，严格的说，应该是路线规划。从A地到B地，如果是驾车，路线规划会将公路路网做为搜索数据；如果是步行，过街天桥、地下通道、人行道做为搜索数据。

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

一、路线规划——驾车

1、驾车路线规划

有三种策略，分别是最短时间、最少费用、最短路径、规避拥堵（参考了实时交通数据，这个比较NB）。

LEAST_TIME，LEAST_FEE,LEAST_DISTANCE,REAL_TRAFFIC

//驾车导航functiondriving_route(){clearMap();mapObj.plugin(["AMap.Driving"],function(){varDrivingOption={policy:AMap.DrivingPolicy.LEAST_TIME};MDrive=newAMap.Driving(DrivingOption);//构造驾车导航类AMap.event.addListener(MDrive,"complete",driving_routeCallBack);//返回导航查询结果MDrive.search(start_xy,end_xy);//根据起终点坐标规划驾车路线});}

示意图：

2、驾车最后一公里步行

在最开始一段，和最后一段步行距离的时候，可以用虚线来表示。

代码：

//起点到路线的起点路线的终点到终点绘制无道路部分varextra_path2=newArray();extra_path2.push(start_xy);extra_path2.push(steps[0].path[0]);varextra_line1=newAMap.Polyline({map:mapObj,path:extra_path2,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",//虚线strokeDasharray:[10,5]});varextra_path3=newArray();varpath_xy=steps[(steps.length-1)].path;extra_path3.push(end_xy);extra_path3.push(path_xy[(path_xy.length-1)]);varextra_line2=newAMap.Polyline({map:mapObj,path:extra_path3,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",//虚线strokeDasharray:[10,5]});

效果图：

3、驾车导航拖拽效果

如果要可拖拽的效果，需要使用另外一个插件，AMap.DragRoute。

代码：

//可拖拽的驾车导航functiondriving_route_drag(){clearMap();varpath=[start_xy,end_xy];mapObj.plugin("AMap.DragRoute",function(){MDrive=newAMap.DragRoute(mapObj,path,AMap.DrivingPolicy.LEAST_FEE);//构造拖拽导航类MDrive.search();//查询导航路径并开启拖拽导航});}

示意图：

示例查看：http://zhaoziang.com/amap/zero_5_1.html

二、路线规划——公交

1、公交导航

公交导航不仅是路线相关的，还是根据公交车路线数据，进行查询。使用到插件AMap.LineSearch。

代码：

//公交线路查询functionlineSearch(){clearMap();//加载公交线路查询插件//实例化公交线路查询类，只取回一条路线mapObj.plugin(["AMap.LineSearch"],function(){varlinesearch=newAMap.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路线，对吧。

代码：

示意图：

3、通过站点，查公交线路

比如，我在北京东直门，想知道东直门都有哪些公交路线。使用服务插件AMap.StationSearch。

代码：

//公交站点查询functionstationSearch(){clearMap();//加载公交站点查询插件mapObj.plugin(["AMap.StationSearch"],function(){//实例化公交站点查询类varstation=newAMap.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

三、路线规划——步行

步行，可以过天桥啊，地下通道啊，穿过小区啊，不能走高速公路啊，等特点。

代码：

//步行导航functionwalking_route(){varMWalk;mapObj.plugin(["AMap.Walking"],function(){MWalk=newAMap.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接口封装得更加完善，使用起来更加简单。

五、全部源代码

<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>地图路线规划服务</title><linkrel="stylesheet"type="text/css"href="zero.css"/><scriptlanguage="javascript"src="http://webapi.amap.com/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"></script></head><bodyonLoad="mapInit()"><divid="iCenter"></div><divid="iControlbox"><p>坐标：<spanid="lnglats"> </span></p><ul><li><buttononclick="javascript:driving_route();">驾车路线规划</button><buttononclick="javascript:driving_route_drag();">可拖拽插件</button></li><li><buttononclick="javascript:transfer_route();">公交路线规划</button><buttononclick="javascript:lineSearch();">518路公交车</button><buttononclick="javascript:stationSearch();">东直门站点</button></li><li><buttononclick="javascript:walking_route();">步行路线规划</button></li><li><buttononclick="javascript:clearMap();">清空地图</button></li></ul></div><divid="result"></div><scripttype="text/javascript">var_bdhmProtocol=(("https:"==document.location.protocol)?"https://":"http://");document.write(unescape("%3Cscriptsrc='"+_bdhmProtocol+"hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd'type='text/javascript'%3E%3C/script%3E"));</script></body><scriptlanguage="javascript">functionsetLi(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";}varmapObj;varroute_textvarsteps;varpolyline;varMDrive;varbtContent=newArray();//结果表格数组varresultStr;//结果拼接stringvarresLine='';//结果表格对象//初始化地图对象，加载地图functionmapInit(){mapObj=newAMap.Map("iCenter",{center:newAMap.LngLat(116.397428,39.90923),//地图中心点level:11//地图显示的比例尺级别});AMap.event.addListener(mapObj,'click',getLnglat);//点击事件}//鼠标点击，获取经纬度坐标functiongetLnglat(e){varx=e.lnglat.getLng();vary=e.lnglat.getLat();document.getElementById("lnglats").innerHTML=x+","+y;}//清空地图functionclearMap(){mapObj.clearMap();document.getElementById("result").innerHTML=' ';}//起、终点varstart_xy=newAMap.LngLat(116.379018,39.865026);varend_xy=newAMap.LngLat(116.321139,39.896028);//驾车导航functiondriving_route(){clearMap();mapObj.plugin(["AMap.Driving"],function(){varDrivingOption={//驾车策略，包括LEAST_TIME，LEAST_FEE,LEAST_DISTANCE,REAL_TRAFFICpolicy:AMap.DrivingPolicy.LEAST_TIME};MDrive=newAMap.Driving(DrivingOption);//构造驾车导航类AMap.event.addListener(MDrive,"complete",driving_routeCallBack);//返回导航查询结果MDrive.search(start_xy,end_xy);//根据起终点坐标规划驾车路线});}//可拖拽的驾车导航functiondriving_route_drag(){clearMap();varpath=[start_xy,end_xy];mapObj.plugin("AMap.DragRoute",function(){MDrive=newAMap.DragRoute(mapObj,path,AMap.DrivingPolicy.LEAST_FEE);//构造拖拽导航类MDrive.search();//查询导航路径并开启拖拽导航});}//导航结果展示functiondriving_routeCallBack(data){varrouteS=data.routes;if(routeS.length<=0){document.getElementById("result").innerHTML="未查找到任何结果!<br/>建议：<br/>1.请确保所有字词拼写正确。<br/>2.尝试不同的关键字。<br/>3.尝试更宽泛的关键字。";}else{route_text="";for(varv=0;v<routeS.length;v++){//驾车步骤数steps=routeS[v].stepsvarroute_count=steps.length;//行车距离（米）vardistance=routeS[v].distance;//拼接输出htmlfor(vari=0;i<steps.length;i++){route_text+="<tr><tdalign=\"left\"onMouseover=\"driveDrawFoldline('"+i+"')\">"+i+"."+steps[i].instruction+"</td></tr>";}}//输出行车路线指示route_text="<tablecellspacing=\"5px\"><tr><tdstyle=\"background:#e1e1e1;\">路线</td></tr><tr><td><imgsrc=\"http://code.mapabc.com/p_w_picpaths/start.gif\"/>  北京南站</td></tr>"+route_text+"<tr><td><imgsrc=\"http://code.mapabc.com/p_w_picpaths/end.gif\"/>  北京西站</td></tr></table>";document.getElementById("result").innerHTML=route_text;drivingDrawLine();}}//绘制驾车导航路线functiondrivingDrawLine(s){//起点、终点图标varsicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-180)});varstartmarker=newAMap.Marker({icon:sicon,//复杂图标visible:true,position:start_xy,map:mapObj,offset:{x:-16,y:-40}});vareicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-134)});varendmarker=newAMap.Marker({icon:eicon,//复杂图标visible:true,position:end_xy,map:mapObj,offset:{x:-16,y:-40}});//起点到路线的起点路线的终点到终点绘制无道路部分varextra_path2=newArray();extra_path2.push(start_xy);extra_path2.push(steps[0].path[0]);varextra_line1=newAMap.Polyline({map:mapObj,path:extra_path2,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",//虚线strokeDasharray:[10,5]});varextra_path3=newArray();varpath_xy=steps[(steps.length-1)].path;extra_path3.push(end_xy);extra_path3.push(path_xy[(path_xy.length-1)]);varextra_line2=newAMap.Polyline({map:mapObj,path:extra_path3,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",//虚线strokeDasharray:[10,5]});vardrawpath=newArray();for(vars=0;s<steps.length;s++){drawpath=steps[s].path;varpolyline=newAMap.Polyline({map:mapObj,path:drawpath,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeDasharray:[10,5]});}mapObj.setFitView();}//绘制驾车导航路段functiondriveDrawFoldline(num){vardrawpath2=newArray();drawpath2=steps[num].path;if(polyline!=null){polyline.setMap(null);}polyline=newAMap.Polyline({map:mapObj,path:drawpath2,strokeColor:"#FF3030",strokeOpacity:0.9,strokeWeight:4,strokeDasharray:[10,5]});mapObj.setFitView(polyline);}//公交导航functiontransfer_route(){clearMap();vartrans;//加载公交换乘插件mapObj.plugin(["AMap.Transfer"],function(){transOptions={city:'北京市',//公交城市policy:AMap.TransferPolicy.LEAST_TIME//乘车策略};//构造公交换乘类trans=newAMap.Transfer(transOptions);//返回导航查询结果AMap.event.addListener(trans,"complete",transCallBack);//显示错误信息AMap.event.addListener(trans,"error",function(e){alert(e.info);});//根据起、终点坐标查询公交换乘路线trans.search(start_xy,end_xy);});}functiontransCallBack(data){varbtCount=data.count;varbtPlans=data.plans;varbtOrigin=data.origin;varbtDestination=data.destination;varbtTaxiCost=data.taxi_cost;varstartName="北京南站";//可以使用地理编码解析起点和终点坐标varendName="北京站";varBusArr=[];varWalkArr=[];varonbus=newArray();varonwalk=newArray();//结果输出用表格展现，输出表格头varresTableHeader="<tablewidth=\"100%\"border=\"0\"cellspacing=\"0\"cellpadding=\"0\"><tr><tdwidth=\"80\"style=\"border-left:1pxsolid#fff;background:#e1e1e1;\">　乘车方案</td><tdwidth=\"80\"style=\"border-left:1pxsolid#fff;background:#e1e1e1;\">　导航信息</td></tr>";btContent.push(resTableHeader);//遍历每种换乘方案for(vari=0;i<btPlans.length;i++){varbtDistance=btPlans[i].distance;varbtseg=btPlans[i].segments;varlineNameArr=newArray();varresLine="";varnaviInfo='';varlineName;for(varj=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="<tablewidth=\"100%\"border=\"0\"cellspacing=\"0\"cellpadding=\"0\">"+"<tr><tdwidth=\"80\"class=\"change_blue\">"+lineName+"</td><tdwidth=\"80\"class=\"change_blue\">"+Getdistance(btDistance)+"</td></tr>"+"<tr><tdwidth=\"80\"class=\"change_blue\"></td><tdwidth=\"80\"><imgsrc=\"http://webapi.amap.com/p_w_picpaths/start.gif\"/><b>起点</b>"+startName+"</td></tr>"+"<tr><tdwidth=\"80\"class=\"change_blue\"></td><tdwidth=\"80\"class=\"change_blue\">"+naviInfo+"</td></tr>"+"<tr><tdwidth=\"80\"class=\"change_blue\"></td><tdwidth=\"80\"><imgsrc=\"http://webapi.amap.com/p_w_picpaths/end.gif\"/><b>终点</b>"+endName+"</td></tr>";btContent.push(resLine);}resultStr=btContent.join("");//写到result这个divdocument.getElementById("result").innerHTML=resultStr;//取出需要加换乘、步行图标的位置，这里仅画出第一个换乘方案varsinseg=btPlans[0].segments;for(varainsinseg){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();}//距离，米换算为千米functionGetdistance(len){if(len<=1000){vars=len;returns+"米";}else{vars=Math.round(len/1000);return"约"+s+"公里";}}//绘制路线，仅第一条functiondrawBuschangeLine(startPot,endPot,BusArr,WalkArr){//自定义起点，终点图标varsicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-180)});vareicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-134)});//绘制起点，终点varstmarker=newAMap.Marker({map:mapObj,position:newAMap.LngLat(startPot.lng,startPot.lat),//基点位置icon:sicon,//复杂图标offset:{x:-16,y:-34}//相对于基点的位置});varendmarker=newAMap.Marker({map:mapObj,position:newAMap.LngLat(endPot.lng,endPot.lat),//基点位置icon:eicon,//复杂图标offset:{x:-16,y:-34}//相对于基点的位置});//绘制乘车的路线for(varjinBusArr){busPolyline=newAMap.Polyline({map:mapObj,path:BusArr[j],strokeColor:"#005cb5",//线颜色strokeOpacity:0.8,//线透明度strokeWeight:6//线宽});}//绘制步行的路线for(variinWalkArr){walkPolyline=newAMap.Polyline({map:mapObj,path:WalkArr[i],strokeColor:"#6EB034",//线颜色strokeOpacity:0.6,//线透明度strokeWeight:6//线宽});}}functionaddMarker(busmar){for(vari=0;i<busmar.length;i++){varbusmarker=newAMap.Marker({icon:newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/busroute.png",size:newAMap.Size(20,20),p_w_picpathOffset:newAMap.Pixel(-33,-3)}),position:busmar[i],offset:{x:-25,y:-25},map:mapObj});}}//公交线路查询functionlineSearch(){clearMap();//加载公交线路查询插件//实例化公交线路查询类，只取回一条路线mapObj.plugin(["AMap.LineSearch"],function(){varlinesearch=newAMap.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);});});}functionlineSearch_Callback(data){varlineArr=data.lineInfo;varlineNum=data.lineInfo.length;if(lineNum==0){resLine=data.info;}else{resLine+="<divid=\"divid"+i+"\"><table>";for(vari=0;i<lineNum;i++){varlineName=lineArr[i].name;varlineCity=lineArr[i].city;vardistance=lineArr[i].distance;varcompany=lineArr[i].company;varstime=lineArr[i].stime;varetime=lineArr[i].etime;varpathArr=lineArr[i].path;varstops=lineArr[i].via_stops;varstartPot=stops[0].location;varendPot=stops[stops.length-1].location;//结果输出用DIV展现，输出内容resLine+="<tr><td><h4><fontcolor=\"#00a6ac\">"+lineName+"</font></h4></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;}}//绘制路线functiondrawbusLine(startPot,endPot,BusArr){//自定义起点，终点图标varsicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-180)});vareicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-134)});//绘制起点，终点varstmarker=newAMap.Marker({map:mapObj,position:newAMap.LngLat(startPot.lng,startPot.lat),//基点位置icon:sicon,//复杂图标offset:{x:-16,y:-34},//相对于基点的位置zIndex:10});varendmarker=newAMap.Marker({map:mapObj,position:newAMap.LngLat(endPot.lng,endPot.lat),//基点位置icon:eicon,//复杂图标offset:{x:-16,y:-34},//相对于基点的位置zIndex:10});//绘制乘车的路线busPolyline=newAMap.Polyline({map:mapObj,path:BusArr,strokeColor:"#005cb5",//线颜色strokeOpacity:0.8,//线透明度strokeWeight:6//线宽});mapObj.setFitView();}//公交站点查询functionstationSearch(){clearMap();//加载公交站点查询插件mapObj.plugin(["AMap.StationSearch"],function(){//实例化公交站点查询类varstation=newAMap.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);});});}/**公交站点查询返回数据解析*/functionstationSearch_CallBack(searchResult){clearMap();varresultStr="";//结果拼接StringvarresultString=searchResult.info;varstationArr=searchResult.stationInfo;varsearchNum=stationArr.length;variMarker=searchResult.location;if(searchNum>0){resultStr+="<divid=\"divid"+i+"\"><table>";for(vari=0;i<searchNum;i++){//结果输出用表格展现resultStr+="<tr><td><h4><fontcolor=\"#00a6ac\">"+stationArr[i].name+"</font></h4></td></tr>";resultStr+="<tr><td>途径该站点的公交线路:</td></tr><tr><td>";varstationBusArr=stationArr[i].buslines;for(varj=0;j<stationBusArr.length;j++){resultStr+=stationBusArr[j].name+"<br/>";}}resultStr+="</td></tr></table></div>"document.getElementById("result").innerHTML=resultStr;varstmarker=newAMap.Marker({map:mapObj,position:iMarker});}else{document.getElementById("result").innerHTML=resultString;}}//步行导航functionwalking_route(){varMWalk;mapObj.plugin(["AMap.Walking"],function(){MWalk=newAMap.Walking();//构造路线导航类AMap.event.addListener(MWalk,"complete",walk_routeCallBack);//返回导航查询结果MWalk.search(start_xy,end_xy);//根据起终点坐标规划步行路线});}//导航结果展示functionwalk_routeCallBack(data){varrouteS=data.routes;if(routeS.length<=0){document.getElementById("result").innerHTML="未查找到任何结果!<br/>建议：<br/>1.请确保所有字词拼写正确。<br/>2.尝试不同的关键字。<br/>3.尝试更宽泛的关键字。";}else{route_text="";for(varv=0;v<routeS.length;v++){//步行导航路段数steps=routeS[v].steps;varroute_count=steps.length;//步行距离（米）vardistance=routeS[v].distance;//拼接输出htmlfor(vari=0;i<steps.length;i++){route_text+="<tr><tdalign=\"left\"onMouseover=\"walkingDrawSeg('"+i+"')\">"+i+"."+steps[i].instruction+"</td></tr>";}}//输出步行路线指示route_text="<tablecellspacing=\"5px\"><tr><tdstyle=\"background:#e1e1e1;\">路线</td></tr><tr><td><imgsrc=\"http://code.mapabc.com/p_w_picpaths/start.gif\"/>  北京南站</td></tr>"+route_text+"<tr><td><imgsrc=\"http://code.mapabc.com/p_w_picpaths/end.gif\"/>  北京站</td></tr></table>";document.getElementById("result").innerHTML=route_text;walkingDrawLine();}}//绘制步行导航路线functionwalkingDrawLine(){//起点、终点图标varsicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-180)});varstartmarker=newAMap.Marker({icon:sicon,//复杂图标visible:true,position:start_xy,map:mapObj,offset:{x:-16,y:-40}});vareicon=newAMap.Icon({p_w_picpath:"http://api.amap.com/Public/p_w_picpaths/js/poi.png",size:newAMap.Size(44,44),p_w_picpathOffset:newAMap.Pixel(-334,-134)});varendmarker=newAMap.Marker({icon:eicon,//复杂图标visible:true,position:end_xy,map:mapObj,offset:{x:-16,y:-40}});//起点到路线的起点路线的终点到终点绘制无道路部分varextra_path2=newArray();extra_path2.push(start_xy);extra_path2.push(steps[0].path[0]);varextra_line1=newAMap.Polyline({map:mapObj,path:extra_path2,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",strokeDasharray:[10,5]});varextra_path3=newArray();varpath_xy=steps[(steps.length-1)].path;extra_path3.push(end_xy);extra_path3.push(path_xy[(path_xy.length-1)]);varextra_line2=newAMap.Polyline({map:mapObj,path:extra_path3,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4,strokeStyle:"dashed",strokeDasharray:[10,5]});for(vars=0;s<steps.length;s++){vardrawpath=steps[s].path;varpolyline=newAMap.Polyline({map:mapObj,path:drawpath,strokeColor:"#9400D3",strokeOpacity:0.7,strokeWeight:4});}mapObj.setFitView();}</script></html>

示例查看：http://zhaoziang.com/amap/zero_5_1.html

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。