【高德地图API】从零开始学高德JS API（五）路线规划

vivi5 · 发表于 2014-8-27 11:35:34

本帖最后由 emilyvivi5 于 2014-8-27 11:38 编辑

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

回答：

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

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

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

一、路线规划——驾车

1、驾车路线规划

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

LEAST_TIME，LEAST_FEE LEAST_DISTANCEREAL_TRAFFIC

我们在这里采取驾车插件来做。代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//驾车导航</li><li>function driving_route() {</li><li> clearMap();</li><li> mapObj.plugin(["AMap.Driving"] function() {</li><li> var DrivingOption = {</li><li> policy: AMap.DrivingPolicy.LEAST_TIME</li><li> };</li><li> MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类</li><li> AMap.event.addListener(MDrive "complete" driving_routeCallBack); //返回导航查询结果</li><li> MDrive.search(start_xy end_xy); //根据起终点坐标规划驾车路线</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

示意图：

2、驾车最后一公里步行

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

代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//起点到路线的起点路线的终点到终点绘制无道路部分</li><li> var extra_path1 = new Array();</li><li> extra_path1.push(start_xy);</li><li> extra_path1.push(steps[0].path[0]);</li><li> var extra_line1 = new AMap.Polyline({</li><li> map: mapObj</li><li> path: extra_path1</li><li> strokeColor: "#9400D3"</li><li> strokeOpacity: 0.7</li><li> strokeWeight: 4</li><li> strokeStyle: "dashed" //虚线</li><li> strokeDasharray: [10 5]</li><li> });</li><li></li><li> var extra_path2 = new Array();</li><li> var path_xy = steps[(steps.length-1)].path;</li><li> extra_path2.push(end_xy);</li><li> extra_path2.push(path_xy[(path_xy.length-1)]);</li><li> var extra_line2 = new AMap.Polyline({</li><li> map: mapObj</li><li> path: extra_path2</li><li> strokeColor: "#9400D3"</li><li> strokeOpacity: 0.7</li><li> strokeWeight: 4</li><li> strokeStyle: "dashed" //虚线</li><li> strokeDasharray: [10 5]</li><li> });
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

效果图：

3、驾车导航拖拽效果

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

代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//可拖拽的驾车导航</li><li>function driving_route_drag(){</li><li> clearMap();</li><li> var path = [start_xyend_xy];</li><li> mapObj.plugin("AMap.DragRoute"function(){</li><li> MDrive = new AMap.DragRoute(mapObj path AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类</li><li> MDrive.search(); //查询导航路径并开启拖拽导航</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

示意图：

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

二、路线规划——公交

1、公交导航

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

代码：

<div align="left"><ul type="1" class="litype_1"><li>//公交线路查询</li><li>function lineSearch() {</li><li> clearMap();</li><li> //加载公交线路查询插件</li><li> //实例化公交线路查询类，只取回一条路线</li><li> mapObj.plugin(["AMap.LineSearch"] function() {</li><li> var linesearch = new AMap.LineSearch({</li><li> pageIndex:1</li><li> city:'北京'</li><li> pageSize:1</li><li> extensions:'all'</li><li> });</li><li> //搜索“518”相关公交线路</li><li> linesearch.search('518');</li><li> AMap.event.addListener(linesearch "complete" lineSearch_Callback);</li><li> AMap.event.addListener(linesearch "error" function(e){alert(e.info);
</li><li> });</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

效果图：

2、公交线路查询，如518

查询公交线路，需要注明城市。每个城市都可能有518路线，对吧。

代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//公交线路查询</li><li>function lineSearch() {</li><li> clearMap();</li><li> //加载公交线路查询插件</li><li> //实例化公交线路查询类，只取回一条路线</li><li> mapObj.plugin(["AMap.LineSearch"] function() {</li><li> var linesearch = new AMap.LineSearch({</li><li> pageIndex:1</li><li> city:'北京'</li><li> pageSize:1</li><li> extensions:'all'</li><li> });</li><li> //搜索“518”相关公交线路</li><li> linesearch.search('518');</li><li> AMap.event.addListener(linesearch "complete" lineSearch_Callback);</li><li> AMap.event.addListener(linesearch "error" function(e){alert(e.info);
</li><li> });</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

示意图：

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

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

代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//公交站点查询</li><li>function stationSearch() {</li><li> clearMap();</li><li> //加载公交站点查询插件</li><li> mapObj.plugin(["AMap.StationSearch"] function() {</li><li> //实例化公交站点查询类</li><li> var station = new AMap.StationSearch({</li><li> pageIndex: 1 //页码</li><li> pageSize: 10 //单页显示结果条数</li><li> city:'010' //确定搜索城市</li><li> });</li><li> station.search('东直门'); //查询</li><li> AMap.event.addListener(station 'complete' stationSearch_CallBack);</li><li> AMap.event.addListener(station 'error' function(e) {alert(e.info);});
</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

示例图：

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

三、路线规划——步行

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

代码：

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li>//步行导航</li><li>function walking_route() {</li><li> var MWalk;</li><li> mapObj.plugin(["AMap.Walking"] function() {</li><li> MWalk = new AMap.Walking(); //构造路线导航类</li><li> AMap.event.addListener(MWalk "complete" walk_routeCallBack); //返回导航查询结果</li><li> MWalk.search(start_xy end_xy); //根据起终点坐标规划步行路线</li><li> });</li><li>}
</li></ul>
[color=rgb(51, 102, 153) !important]复制代码</div>

复制代码

效果图：

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

四、小结

驾车，公交，步行的区别

1、从效果图里可以看出，这三种路线规划是搜索的不同数据库。

2、他们的服务插件不一样，都是通过【高德服务插件】进行调用。比原生API接口封装得更加完善，使用起来更加简单。

五、全部源代码

<div align="left"></div><div align="left"><ul type="1" class="litype_1"><li><!DOCTYPE HTML></li><li><html></li><li><head></li><li><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</li><li><title>地图路线规划服务</title>
</li><li><link rel="stylesheet" type="text/css" href="zero.css" />
</li><li><script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=caaa086bdf5666322fba3baf5a6a2c03"></script></li><li></head></li><li><body></li><li> <div id="iCenter"></div></li><li> <div id="iControlbox"></li><li> 坐标： </li><li> <ul></li><li> <li></li><li> <button>驾车路线规划</button></li><li> <button>可拖拽插件</button></li><li> </li></li><li> <li></li><li> <button>公交路线规划</button></li><li> <button>518路公交车</button></li><li> <button>东直门站点</button></li><li> </li></li><li> <li></li><li> <button>步行路线规划</button></li><li> </li></li><li> <li></li><li> <button>清空地图</button></li><li> </li></li><li> </ul></li><li> </div></li><li> <div id="result"></div></li><li></li><li><script type="text/javascript"></li><li>var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");</li><li>document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faeff88f19045b513af7681b011cea3bd' type='text/javascript'%3E%3C/script%3E"));</li><li></script></li><li></li><li></body></li><li><script language="javascript"></li><li>function setLi(id1id2){</li><li> document.getElementById("box1").style.display = "none";</li><li> document.getElementById("box2").style.display = "none";</li><li> document.getElementById("box3").style.display = "none";</li><li> document.getElementById(id1).style.display = "block";</li><li></li><li> document.getElementById("iLi1").style.background = "#eee";</li><li> document.getElementById("iLi2").style.background = "#eee";</li><li> document.getElementById("iLi3").style.background = "#eee";</li><li> document.getElementById(id2).style.background = "#fff";</li><li>}</li><li></li><li>var mapObj;</li><li>var route_text</li><li>var steps;</li><li>var polyline;</li><li>var MDrive;</li><li>var btContent = new Array(); //结果表格数组</li><li>var resultStr;//结果拼接string</li><li>var resLine = ''; //结果表格对象</li><li>//初始化地图对象，加载地图</li><li>function mapInit(){</li><li> mapObj = new AMap.Map("iCenter"{</li><li> center:new AMap.LngLat(116.39742839.90923) //地图中心点</li><li> level:11 //地图显示的比例尺级别</li><li> });</li><li> AMap.event.addListener(mapObj'click'getLnglat); //点击事件</li><li>}</li><li>//鼠标点击，获取经纬度坐标</li><li>function getLnglat(e){</li><li> var x = e.lnglat.getLng();</li><li> var y = e.lnglat.getLat();</li><li> document.getElementById("lnglats").innerHTML = x + "" + y;</li><li>}</li><li>//清空地图</li><li>function clearMap(){</li><li> mapObj.clearMap();</li><li> document.getElementById("result").innerHTML = ' ';</li><li>}</li><li>//起、终点</li><li>var start_xy = new AMap.LngLat(116.37901839.865026);</li><li>var end_xy = new AMap.LngLat(116.321139 39.896028);</li><li>//驾车导航</li><li>function driving_route() {</li><li> clearMap();</li><li> mapObj.plugin(["AMap.Driving"] function() {</li><li> var DrivingOption = {</li><li> //驾车策略，包括 LEAST_TIME，LEAST_FEE LEAST_DISTANCEREAL_TRAFFIC</li><li> policy: AMap.DrivingPolicy.LEAST_TIME</li><li> };</li><li> MDrive = new AMap.Driving(DrivingOption); //构造驾车导航类</li><li> AMap.event.addListener(MDrive "complete" driving_routeCallBack); //返回导航查询结果</li><li> MDrive.search(start_xy end_xy); //根据起终点坐标规划驾车路线</li><li> });</li><li>}</li><li>//可拖拽的驾车导航</li><li>function driving_route_drag(){</li><li> clearMap();</li><li> var path = [start_xyend_xy];</li><li> mapObj.plugin("AMap.DragRoute"function(){</li><li> MDrive = new AMap.DragRoute(mapObj path AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类</li><li> MDrive.search(); //查询导航路径并开启拖拽导航</li><li> });</li><li>}</li><li>//导航结果展示</li><li>function driving_routeCallBack(data) {</li><li> var routeS = data.routes;</li><li> if (routeS.length <= 0) {</li><li> document.getElementById("result").innerHTML = "未查找到任何结果! 建议： 1.请确保所有字词拼写正确。 2.尝试不同的关键字。 3.尝试更宽泛的关键字。";</li><li> }</li><li> else{</li><li> route_text="";</li><li> for(var v =0; v< routeS.length;v++){</li><li> //驾车步骤数</li><li> steps = routeS[v].steps</li><li> var route_count = steps.length;</li><li> //行车距离（米）</li><li> var distance = routeS[v].distance;</li><li> //拼接输出html</li><li> for(var i=0 ;i< steps.length;i++){</li><li> route_text += "<tr><td align=\"left\" onMouseover=\"driveDrawFoldline('" + i + "')\">" + i +"." +steps.instruction + "</td></tr>";</li><li> }</li><li> }</li><li> //输出行车路线指示</li><li> route_text = "<table cellspacing=\"5px\"><tr><td style=\"background:#e1e1e1;\">路线</td></tr><tr><td><img src=\"http://code.mapabc.com/images/start.gif\" /> 北京南站</td></tr>" + route_text + "<tr><td><img src=\"http://code.mapabc.com/images/end.gif\" /> 北京西站</td></tr></table>";</li><li> document.getElementById("result").innerHTML = route_text;</li><li> drivingDrawLine();</li><li> }</li><li>}</li><li>//绘制驾车导航路线</li><li>function drivingDrawLine(s) {</li><li> //起点、终点图标</li><li> var sicon = new AMap.Icon({</li><li> image: "http://api.amap.com/Public/images/js/poi.png"</li><li> size:new AMap.Size(4444)</li><li> imageOffset: new AMap.Pixel(-334 -180)</li><li> });</li><li> var startmarker = new AMap.Marker({</li><li> icon : sicon //复杂图标</li><li> visible : true</li><li> position : start_xy</li><li> map:mapObj</li><li> offset : {</li><li> x : -16</li><li> y : -40</li><li> }</li><li> });</li><li> var eicon = new AMap.Icon({</li><li> image: "http://api.amap.com/Public/images/js/poi.png"</li><li> size:new AMap.Size(4444)</li><li> imageOffset: new AMap.Pixel(-334 -134)</li><li> });</li><li> var endmarker = new AMap.Marker({</li><li> icon : eicon //复杂图标</li><li> visible : true</li><li> position : end_xy</li><li> map:mapObj</li><li> offset : {</li><li> x : -16</li><li> y : -40</li><li> }</li><li> });</li><li> //起点到路线的起点路线的终点到终点绘制无道路部分</li><li> var extra_path1 = new Array();</li><li> extra_path1.push(start_xy);</li><li> extra_path1.push(steps[0].path[0]);</li><li> var extra_line1 = new AMap.Polyline({</li><li> map: mapObj</li><li> path: extra_path1</li><li> strokeColor: "#9400D3"</li><li> strokeOpacity: 0.7</li><li> strokeWeight: 4</li><li> strokeStyle: "dashed" //虚线</li><li> strokeDasharray: [10 5]</li><li> });</li><li></li><li> var extra_path2 = new Array();</li><li> var path_xy = steps[(steps.length-1)].path;</li><li> extra_path2.push(end_xy);</li><li> extra_path2.push(path_xy[(path_xy.length-1)]);</li><li> var extra_line2 = new AMap.Polyline({</li><li> map: mapObj</li><li> path: extra_path2</li><li> strokeColor: "#9400D3"</li><li> strokeOpacity: 0.7</li><li> strokeWeight: 4</li><li> strokeStyle: "dashed" //虚线</li><li> strokeDasharray: [10 5]</li><li> });</li><li></li><li> var drawpath = new Array();</li><li> for(var s=0; s<steps.length; s++){</li><li> drawpath = steps<strike>.path;</strike></li><li><strike> var polyline = new AMap.Polyline({</strike></li><li><strike> map: mapObj</strike></li><li><strike> path: drawpath</strike></li><li><strike> strokeColor: "#9400D3"</strike></li><li><strike> strokeOpacity: 0.7</strike></li><li><strike> strokeWeight: 4</strike></li><li><strike> strokeDasharray: [10 5]</strike></li><li><strike> });</strike></li><li><strike> }</strike></li><li><strike> mapObj.setFitView();</strike></li><li><strike>}</strike></li><li><strike>//绘制驾车导航路段</strike></li><li><strike>function driveDrawFoldline(num){</strike></li><li><strike> var drawpath1 = new Array();</strike></li><li><strike> drawpath1 = steps[num].path;</strike></li><li><strike> if(polyline != null){</strike></li><li><strike> polyline.setMap(null);</strike></li><li><strike> }</strike></li><li><strike> polyline = new AMap.Polyline({</strike></li><li><strike> map: mapObj</strike></li><li><strike> path: drawpath1</strike></li><li><strike> strokeColor: "#FF3030"</strike></li><li><strike> strokeOpacity: 0.9</strike></li><li><strike> strokeWeight: 4</strike></li><li><strike> strokeDasharray: [10 5]</strike></li><li><strike> });</strike></li><li></li><li><strike> mapObj.setFitView(polyline);</strike></li><li><strike>}</strike></li><li><strike>//公交导航</strike></li><li><strike>function transfer_route() {</strike></li><li><strike> clearMap();</strike></li><li><strike> var trans;</strike></li><li><strike> //加载公交换乘插件</strike></li><li><strike> mapObj.plugin(["AMap.Transfer"] function() {</strike></li><li><strike> transOptions = {</strike></li><li><strike> city: '北京市' //公交城市</strike></li><li><strike> policy: AMap.TransferPolicy.LEAST_TIME //乘车策略</strike></li><li><strike> };</strike></li><li><strike> //构造公交换乘类</strike></li><li><strike> trans = new AMap.Transfer (transOptions);</strike></li><li><strike> //返回导航查询结果</strike></li><li><strike> AMap.event.addListener(trans "complete" transCallBack);</strike></li><li><strike> //显示错误信息</strike></li><li><strike> AMap.event.addListener(trans "error" function(e) {alert(e.info);});
</strike></li><li><strike> //根据起、终点坐标查询公交换乘路线</strike></li><li><strike> trans.search(start_xyend_xy);</strike></li><li><strike> });</strike></li><li><strike>}</strike></li><li><strike>function transCallBack(data) {</strike></li><li><strike> var btCount = data.count;</strike></li><li><strike> var btPlans = data.plans;</strike></li><li><strike> var btOrigin = data.origin;</strike></li><li><strike> var btDestination = data.destination;</strike></li><li><strike> var btTaxiCost = data.taxi_cost;</strike></li><li><strike> var startName = "北京南站"; //可以使用地理编码解析起点和终点坐标</strike></li><li><strike> var endName = "北京站";</strike></li><li><strike> var BusArr = [];</strike></li><li><strike> var WalkArr = [];</strike></li><li><strike> var onbus = new Array();</strike></li><li><strike> var onwalk = new Array();</strike></li><li><strike> //结果输出用表格展现，输出表格头</strike></li><li><strike> 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>";</strike></li><li><strike> btContent.push(resTableHeader);</strike></li><li><strike> //遍历每种换乘方案</strike></li><li><strike> for (var i = 0; i < btPlans.length; i++) {</strike></li><li><strike> var btDistance = btPlans.distance;</strike></li><li><strike> var btseg = btPlans.segments;</strike></li><li><strike> var lineNameArr = new Array();</strike></li><li><strike> var resLine = "";</strike></li><li><strike> var naviInfo = '';</strike></li><li><strike> var lineName;</strike></li><li><strike> for(var j = 0; j < btseg.length; j++) {</strike></li><li><strike> naviInfo += btseg[j].instruction + " ";</strike></li><li><strike> if(btseg[j].transit_mode =="WALK") {</strike></li><li><strike> if(i===0) {</strike></li><li><strike> WalkArr.push(btseg[j].transit.path);</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> else {</strike></li><li><strike> lineName = btseg[j].transit.lines[0].name;</strike></li><li><strike> lineNameArr.push(lineName);</strike></li><li><strike> if(i===0) {</strike></li><li><strike> BusArr.push(btseg[j].transit.path);</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> lineName = lineNameArr.join("-->");</strike></li><li><strike> drawBuschangeLine(btOriginbtDestinationBusArrWalkArr);</strike></li><li><strike> //结果输出用表格展现，输出表格内容</strike></li><li><strike> resLine = "<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"</strike></li><li><strike> + "<tr><td width=\"80\" class=\"change_blue\">"+ lineName +"</td><td width=\"80\" class=\"change_blue\" >"</strike></li><li><strike> + Getdistance(btDistance) + "</td></tr>" + "<tr><td width=\"80\" class=\"change_blue\" ></td><td width=\"80\"><img src=\"http://webapi.amap.com/images/start.gif\" /> 起点 " + 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\" /> 终点 " + endName + "</td></tr>";</strike></li><li><strike> btContent.push(resLine);</strike></li><li><strike> }</strike></li><li><strike> resultStr = btContent.join("");</strike></li><li><strike> //写到result这个div</strike></li><li><strike> document.getElementById("result").innerHTML = resultStr;</strike></li><li><strike> //取出需要加换乘、步行图标的位置，这里仅画出第一个换乘方案</strike></li><li><strike> var sinseg = btPlans[0].segments;</strike></li><li><strike> for(var a in sinseg) {</strike></li><li><strike> if(sinseg[a].transit_mode =="WALK") {</strike></li><li><strike> onwalk.push(sinseg[a].transit.origin);</strike></li><li><strike> }</strike></li><li><strike> else {</strike></li><li><strike> onbus.push(sinseg[a].transit.on_station.location);</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> addMarker(onbus);</strike></li><li><strike> mapObj.setFitView();</strike></li><li><strike>}</strike></li><li><strike>//距离，米换算为千米</strike></li><li><strike>function Getdistance(len) {</strike></li><li><strike> if (len <= 1000) {</strike></li><li><strike> var s = len;</strike></li><li><strike> return s + "米";</strike></li><li><strike> } else {</strike></li><li><strike> var s = Math.round(len / 1000);</strike></li><li><strike> return "约" + s + "公里";</strike></li><li><strike> }</strike></li><li><strike>}</strike></li><li><strike>//绘制路线，仅第一条</strike></li><li><strike>function drawBuschangeLine(startPotendPotBusArrWalkArr) {</strike></li><li><strike> //自定义起点，终点图标</strike></li><li><strike> var sicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size: new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -180)</strike></li><li><strike> });</strike></li><li><strike> var eicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size: new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -134)</strike></li><li><strike> });</strike></li><li><strike> //绘制起点，终点</strike></li><li><strike> var stmarker = new AMap.Marker({</strike></li><li><strike> map:mapObj</strike></li><li><strike> position:new AMap.LngLat(startPot.lngstartPot.lat) //基点位置</strike></li><li><strike> icon:sicon //复杂图标</strike></li><li><strike> offset:{x:-16y:-34} //相对于基点的位置</strike></li><li><strike> });</strike></li><li><strike> var endmarker = new AMap.Marker({</strike></li><li><strike> map:mapObj</strike></li><li><strike> position:new AMap.LngLat(endPot.lngendPot.lat) //基点位置</strike></li><li><strike> icon:eicon //复杂图标</strike></li><li><strike> offset:{x:-16y:-34} //相对于基点的位置</strike></li><li><strike> });</strike></li><li><strike> //绘制乘车的路线</strike></li><li><strike> for(var j in BusArr) {</strike></li><li><strike> busPolyline = new AMap.Polyline({</strike></li><li><strike> map:mapObj</strike></li><li><strike> path:BusArr[j]</strike></li><li><strike> strokeColor:"#005cb5"//线颜色</strike></li><li><strike> strokeOpacity:0.8//线透明度</strike></li><li><strike> strokeWeight:6//线宽</strike></li><li><strike> });</strike></li><li><strike> }</strike></li><li><strike> //绘制步行的路线</strike></li><li><strike> for (var i in WalkArr) {</strike></li><li><strike> walkPolyline = new AMap.Polyline({</strike></li><li><strike> map:mapObj</strike></li><li><strike> path:WalkArr</strike></li><li><strike> strokeColor : "#6EB034" //线颜色</strike></li><li><strike> strokeOpacity : 0.6 //线透明度</strike></li><li><strike> strokeWeight : 6//线宽</strike></li><li><strike> });</strike></li><li><strike> }</strike></li><li></li><li><strike>}</strike></li><li><strike>function addMarker(busmar) {</strike></li><li><strike> for (var i = 0; i < busmar.length; i++) {</strike></li><li><strike> var busmarker = new AMap.Marker({</strike></li><li><strike> icon : new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/busroute.png"</strike></li><li><strike> size: new AMap.Size(20 20)</strike></li><li><strike> imageOffset: new AMap.Pixel(-33 -3)</strike></li><li><strike> })</strike></li><li><strike> position : busmar</strike></li><li><strike> offset : {</strike></li><li><strike> x : -25</strike></li><li><strike> y : -25</strike></li><li><strike> }</strike></li><li><strike> map:mapObj</strike></li><li><strike> });</strike></li><li><strike> }</strike></li><li><strike>}</strike></li><li><strike>//公交线路查询</strike></li><li><strike>function lineSearch() {</strike></li><li><strike> clearMap();</strike></li><li><strike> //加载公交线路查询插件</strike></li><li><strike> //实例化公交线路查询类，只取回一条路线</strike></li><li><strike> mapObj.plugin(["AMap.LineSearch"] function() {</strike></li><li><strike> var linesearch = new AMap.LineSearch({</strike></li><li><strike> pageIndex:1</strike></li><li><strike> city:'北京'</strike></li><li><strike> pageSize:1</strike></li><li><strike> extensions:'all'</strike></li><li><strike> });</strike></li><li><strike> //搜索“518”相关公交线路</strike></li><li><strike> linesearch.search('518');</strike></li><li><strike> AMap.event.addListener(linesearch "complete" lineSearch_Callback);</strike></li><li><strike> AMap.event.addListener(linesearch "error" function(e){alert(e.info);
</strike></li><li><strike> });</strike></li><li><strike> });</strike></li><li><strike>}</strike></li><li><strike>function lineSearch_Callback(data) {</strike></li><li><strike> var lineArr = data.lineInfo;</strike></li><li><strike> var lineNum = data.lineInfo.length;</strike></li><li><strike> if(lineNum == 0) {</strike></li><li><strike> resLine = data.info;</strike></li><li><strike> }</strike></li><li><strike> else {</strike></li><li><strike> resLine += "<div id=\"divid" + i + "\"><table>";</strike></li><li><strike> for(var i = 0; i < lineNum; i++) {</strike></li><li><strike> var lineName = lineArr.name;</strike></li><li><strike> var lineCity = lineArr.city;</strike></li><li><strike> var distance = lineArr.distance;</strike></li><li><strike> var company = lineArr.company;</strike></li><li><strike> var stime = lineArr.stime;</strike></li><li><strike> var etime = lineArr.etime;</strike></li><li><strike> var pathArr = lineArr.path;</strike></li><li><strike> var stops = lineArr.via_stops;</strike></li><li><strike> var startPot = stops[0].location;</strike></li><li><strike> var endPot = stops[stops.length-1].location;</strike></li><li><strike> //结果输出用DIV展现，输出内容</strike></li><li><strike> resLine += "<tr><td><h3>" + lineName + "</h3></td></tr>";</strike></li><li><strike> resLine += "<tr><td>首末车时间：" + stime.substring(0 2) + ":" + stime.substring(2 4) + '-' + etime.substring(0 2) + ":" + etime.substring(2 4) + "；" + "全长：" + distance + "公里;" + "所属公司：" + company+"</td></tr>";</strike></li><li><strike> //绘制第一条路线</strike></li><li><strike> if(i==0) drawbusLine(startPotendPotpathArr);</strike></li><li><strike> }</strike></li><li><strike> resLine += "</table></div>"</strike></li><li><strike> document.getElementById('result').innerHTML = resLine;</strike></li><li><strike> }</strike></li><li><strike>}</strike></li><li><strike>//绘制路线</strike></li><li><strike>function drawbusLine(startPotendPotBusArr) {</strike></li><li><strike> //自定义起点，终点图标</strike></li><li><strike> var sicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size: new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -180)</strike></li><li><strike> });</strike></li><li><strike> var eicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size: new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -134)</strike></li><li><strike> });</strike></li><li><strike> //绘制起点，终点</strike></li><li><strike> var stmarker = new AMap.Marker({</strike></li><li><strike> map:mapObj</strike></li><li><strike> position:new AMap.LngLat(startPot.lngstartPot.lat) //基点位置</strike></li><li><strike> icon:sicon //复杂图标</strike></li><li><strike> offset:{x:-16y:-34} //相对于基点的位置</strike></li><li><strike> zIndex:10</strike></li><li><strike> });</strike></li><li><strike> var endmarker = new AMap.Marker({</strike></li><li><strike> map:mapObj</strike></li><li><strike> position:new AMap.LngLat(endPot.lngendPot.lat) //基点位置</strike></li><li><strike> icon:eicon //复杂图标</strike></li><li><strike> offset:{x:-16y:-34} //相对于基点的位置</strike></li><li><strike> zIndex:10</strike></li><li><strike> });</strike></li><li><strike> //绘制乘车的路线</strike></li><li><strike> busPolyline = new AMap.Polyline({</strike></li><li><strike> map:mapObj</strike></li><li><strike> path:BusArr</strike></li><li><strike> strokeColor:"#005cb5"//线颜色</strike></li><li><strike> strokeOpacity:0.8//线透明度</strike></li><li><strike> strokeWeight:6//线宽</strike></li><li><strike> });</strike></li><li><strike> mapObj.setFitView();</strike></li><li><strike>}</strike></li><li><strike>//公交站点查询</strike></li><li><strike>function stationSearch() {</strike></li><li><strike> clearMap();</strike></li><li><strike> //加载公交站点查询插件</strike></li><li><strike> mapObj.plugin(["AMap.StationSearch"] function() {</strike></li><li><strike> //实例化公交站点查询类</strike></li><li><strike> var station = new AMap.StationSearch({</strike></li><li><strike> pageIndex: 1 //页码</strike></li><li><strike> pageSize: 10 //单页显示结果条数</strike></li><li><strike> city:'010' //确定搜索城市</strike></li><li><strike> });</strike></li><li><strike> station.search('东直门'); //查询</strike></li><li><strike> AMap.event.addListener(station 'complete' stationSearch_CallBack);</strike></li><li><strike> AMap.event.addListener(station 'error' function(e) {alert(e.info);});
</strike></li><li><strike> });</strike></li><li><strike>}</strike></li><li><strike>/*</strike></li><li><strike>*公交站点查询返回数据解析</strike></li><li><strike>*/</strike></li><li><strike>function stationSearch_CallBack(searchResult) {</strike></li><li><strike> clearMap();</strike></li><li><strike> var resultStr = ""; //结果拼接String</strike></li><li><strike> var resultString = searchResult.info;</strike></li><li><strike> var stationArr = searchResult.stationInfo;</strike></li><li><strike> var searchNum = stationArr.length;</strike></li><li><strike> var iMarker = searchResult.location;</strike></li><li></li><li><strike> if(searchNum > 0) {</strike></li><li><strike> resultStr += "<div id=\"divid" + i + "\"><table>";</strike></li><li><strike> for(var i=0; i<searchNum; i++) {</strike></li><li><strike> //结果输出用表格展现</strike></li><li><strike> resultStr += "<tr><td><h3>" + stationArr.name + "</h3></td></tr>";</strike></li><li></li><li><strike> resultStr += "<tr><td>途径该站点的公交线路:</td></tr><tr><td>";</strike></li><li><strike> var stationBusArr = stationArr.buslines;</strike></li><li><strike> for(var j =0; j<stationBusArr.length; j++) {</strike></li><li><strike> resultStr += stationBusArr[j].name + " ";</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> resultStr += "</td></tr></table></div>"</strike></li><li><strike> document.getElementById("result").innerHTML = resultStr;</strike></li><li></li><li><strike> var stmarker = new AMap.Marker({</strike></li><li><strike> map:mapObj</strike></li><li><strike> position:iMarker</strike></li><li><strike> });</strike></li><li><strike> }</strike></li><li><strike> else {</strike></li><li><strike> document.getElementById("result").innerHTML = resultString;</strike></li><li><strike> }</strike></li><li><strike>}</strike></li><li><strike>//步行导航</strike></li><li><strike>function walking_route() {</strike></li><li><strike> var MWalk;</strike></li><li><strike> mapObj.plugin(["AMap.Walking"] function() {</strike></li><li><strike> MWalk = new AMap.Walking(); //构造路线导航类</strike></li><li><strike> AMap.event.addListener(MWalk "complete" walk_routeCallBack); //返回导航查询结果</strike></li><li><strike> MWalk.search(start_xy end_xy); //根据起终点坐标规划步行路线</strike></li><li><strike> });</strike></li><li><strike>}</strike></li><li><strike>//导航结果展示</strike></li><li><strike>function walk_routeCallBack(data) {</strike></li><li><strike> var routeS = data.routes;</strike></li><li><strike> if (routeS.length <= 0) {</strike></li><li><strike> document.getElementById("result").innerHTML = "未查找到任何结果! 建议： 1.请确保所有字词拼写正确。 2.尝试不同的关键字。 3.尝试更宽泛的关键字。";</strike></li><li><strike> }</strike></li><li><strike> else {</strike></li><li><strike> route_text="";</strike></li><li><strike> for(var v =0; v< routeS.length;v++){</strike></li><li><strike> //步行导航路段数</strike></li><li><strike> steps = routeS[v].steps;</strike></li><li><strike> var route_count = steps.length;</strike></li><li><strike> //步行距离（米）</strike></li><li><strike> var distance = routeS[v].distance;</strike></li><li><strike> //拼接输出html</strike></li><li><strike> for(var i=0 ;i< steps.length;i++) {</strike></li><li><strike> route_text += "<tr><td align=\"left\" onMouseover=\"walkingDrawSeg('" + i + "')\">" + i +"." +steps.instruction + "</td></tr>";</strike></li><li><strike> }</strike></li><li><strike> }</strike></li><li><strike> //输出步行路线指示</strike></li><li><strike> route_text = "<table cellspacing=\"5 px\" ><tr><td style=\"background:#e1e1e1;\">路线</td></tr><tr><td><img src=\"http://code.mapabc.com/images/start.gif\" /> 北京南站</td></tr>" + route_text + "<tr><td><img src=\"http://code.mapabc.com/images/end.gif\" /> 北京站</td></tr></table>";</strike></li><li><strike> document.getElementById("result").innerHTML = route_text;</strike></li><li><strike> walkingDrawLine();</strike></li><li><strike> }</strike></li><li><strike>}</strike></li><li><strike>//绘制步行导航路线</strike></li><li><strike>function walkingDrawLine() {</strike></li><li><strike> //起点、终点图标</strike></li><li><strike> var sicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size:new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -180)</strike></li><li><strike> });</strike></li><li><strike> var startmarker = new AMap.Marker({</strike></li><li><strike> icon : sicon //复杂图标</strike></li><li><strike> visible : true</strike></li><li><strike> position : start_xy</strike></li><li><strike> map:mapObj</strike></li><li><strike> offset : {</strike></li><li><strike> x : -16</strike></li><li><strike> y : -40</strike></li><li><strike> }</strike></li><li><strike> });</strike></li><li><strike> var eicon = new AMap.Icon({</strike></li><li><strike> image: "http://api.amap.com/Public/images/js/poi.png"</strike></li><li><strike> size:new AMap.Size(4444)</strike></li><li><strike> imageOffset: new AMap.Pixel(-334 -134)</strike></li><li><strike> });</strike></li><li><strike> var endmarker = new AMap.Marker({</strike></li><li><strike> icon : eicon //复杂图标</strike></li><li><strike> visible : true</strike></li><li><strike> position : end_xy</strike></li><li><strike> map:mapObj</strike></li><li><strike> offset : {</strike></li><li><strike> x : -16</strike></li><li><strike> y : -40</strike></li><li><strike> }</strike></li><li><strike> });</strike></li><li><strike> //起点到路线的起点路线的终点到终点绘制无道路部分</strike></li><li><strike> var extra_path1 = new Array();</strike></li><li><strike> extra_path1.push(start_xy);</strike></li><li><strike> extra_path1.push(steps[0].path[0]);</strike></li><li><strike> var extra_line1 = new AMap.Polyline({</strike></li><li><strike> map: mapObj</strike></li><li><strike> path: extra_path1</strike></li><li><strike> strokeColor: "#9400D3"</strike></li><li><strike> strokeOpacity: 0.7</strike></li><li><strike> strokeWeight: 4</strike></li><li><strike> strokeStyle: "dashed"</strike></li><li><strike> strokeDasharray: [10 5]</strike></li><li><strike> });</strike></li><li></li><li><strike> var extra_path2 = new Array();</strike></li><li><strike> var path_xy = steps[(steps.length-1)].path;</strike></li><li><strike> extra_path2.push(end_xy);</strike></li><li><strike> extra_path2.push(path_xy[(path_xy.length-1)]);</strike></li><li><strike> var extra_line2 = new AMap.Polyline({</strike></li><li><strike> map: mapObj</strike></li><li><strike> path: extra_path2</strike></li><li><strike> strokeColor: "#9400D3"</strike></li><li><strike> strokeOpacity: 0.7</strike></li><li><strike> strokeWeight: 4</strike></li><li><strike> strokeStyle: "dashed"</strike></li><li><strike> strokeDasharray: [10 5]</strike></li><li><strike> });</strike></li><li></li><li><strike> for(var s=0; s<steps.length; s++) {</strike></li><li><strike> var drawpath = steps<strike>.path;</strike></strike></li><li><strike><strike> var polyline = new AMap.Polyline({</strike></strike></li><li><strike><strike> map: mapObj</strike></strike></li><li><strike><strike> path: drawpath</strike></strike></li><li><strike><strike> strokeColor: "#9400D3"</strike></strike></li><li><strike><strike> strokeOpacity: 0.7</strike></strike></li><li><strike><strike> strokeWeight: 4</strike></strike></li><li><strike><strike> });</strike></strike></li><li><strike><strike> }</strike></strike></li><li><strike><strike> mapObj.setFitView();</strike></strike></li><li><strike><strike>}</strike></strike></li><li><strike><strike></script></strike></strike></li><li><strike><strike></html></strike></strike></li><li><strike><strike>
</strike></strike></li></ul><strike><strike>
[color=rgb(51, 102, 153) !important]复制代码</strike></strike></div>

复制代码

~~~~[size=12.727272033691406px]示例查看：[size=12.727272033691406px]http://zhaoziang.com/amap/zero_5_1.html~~~~

高德地图, function, 地下通道, 人行道, 从零开始

lzj0327 · 发表于 2014-11-8 21:07:32

假如输入地址后查询公交线路之类的，直接跳转到高德地图的查询，高德地图的搜索地址是：http://www.amap.com/#!plan!!saddr=29.471949,106.476136|0|%E6%96%B0%E5%B1%B1%E6%9D%91(%E5%9C%B0%E9%93%81%E7%AB%99)&
saddrid=BV10045797&smodxy=106.476136,29.471949&daddr=29.475656,106.482746|0|%E7%BB%88%E7%82%B9&
dirflg=r&sort=dist&tab=daddr&page=1&scity=500000&dcity=500000&_=1415448964648；我是直接在里面拼接参数，还是其他办法，另外参数是什么意思？我就看懂了几个坐标

vivi5 · 发表于 2014-11-10 11:24:00

Hi JS API不提供这个功能，请知晓～

dasenlin85 · 发表于 2014-11-19 22:10:35

可不可以在路线上划箭头，标明线路方向呢？

vivi5 · 发表于 2014-11-20 19:30:57

dasenlin85 发表于 2014-11-19 22:10
可不可以在路线上划箭头，标明线路方向呢？

已经在你的帖子上做回复啦～～～

henry_02 · 发表于 2015-1-14 15:25:26

请问下，我想通过JS进行驾车路径规划，里面除了起点和终点，还包含了途经点，而且每个点我需要自定义，请问怎么做好呢？

a834500231 · 发表于 2015-3-16 16:23:47

请问一下，我是在底层地图上面加了一个覆盖物图层，然后怎么实现从当前我的位置画一条到我覆盖物图层的路径呢？

lsgjzhuwei · 发表于 2015-6-26 11:09:48

您好，我现在用dragroute做的路劲规划，现在有一个需求是鼠标放在拖拽产生的途经点上时需要显示途经点的名字，那个插件现在的功能是鼠标放在途经点上显示："拖拽以更改路线".我在dragroute的第四个参数里面做了设置，但是不起作用，能帮我看一下什么原因吗？
我的代码是：
var route = new AMap.DragRoute(mapObj, points, policy,{midMarkerOptions:{map:mapObj,title:'123'}});
route.search(); //查询导航路径并开启拖拽导航
第四个参数里面设置更改图标等属性是可以用的，但是title属性不起左右。

JSMap · 发表于 2015-7-3 09:55:34

lsgjzhuwei 发表于 2015-6-26 11:09
您好，我现在用dragroute做的路劲规划，现在有一个需求是鼠标放在拖拽产生的途经点上时需要显示途经点的名 ...

你好，关于路径拖拽效果你做了么？可以分享代码吗？谢谢！

piaohq · 发表于 2015-7-20 16:37:01

AMap.Driving 是否支持 LngLat 多点途经点？例如像 AMap.DragRoute 一样 [AMap.LngLat(129.520355,42.919783),AMap.LngLat(129.520...]

但以名称查询时好像可以...

用户名		自动登录	找回密码
密码			立即注册