当前位置:文档之家› 【高德地图API】从零开始学高德JS API(五)路线规划

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

【高德地图API】从零开始学高德JS API(五)路线规划先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别?回答: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(); //查询导航路径并开启拖拽导航});}示意图:示例查看:/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();});});}效果图: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();});});}示意图: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();});});}示例图:示例查看:/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); //根据起终点坐标规划步行路线});}效果图:示例查看:/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="/maps?v=1.2&key=caaa 086bdf5666322fba3baf5a6a2c03"></script></head><body onLoad="mapInit()"><div id="iCenter"></div><div id="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><div id="result"></div><!-- tongji begin--><script type="text/javascript">var _bdhmProtocol = (("https:" ==document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" +_bdhmProtocol +"/h.js%3Faeff88f19045b513af7681b011cea 3bd' 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_textvar steps;var polyline;var MDrive;var btContent = new Array(); //结果表格数组var resultStr;//结果拼接stringvar 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 =' ';}//起、终点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_TRAFFICpolicy: 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.请确保所有字词拼写正确。

相关主题