博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行
阅读量:6290 次
发布时间:2019-06-22

本文共 4896 字,大约阅读时间需要 16 分钟。

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

回答:

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(); //查询导航路径并开启拖拽导航      });}

 

示意图:

 

示例查看:

 

二、路线规划——公交

 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);});      });  }

 

示例图:

 

示例查看:

 

三、路线规划——步行

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

 

代码:

//步行导航  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); //根据起终点坐标规划步行路线      });  }

 

效果图:

 

示例查看:

 

四、小结

驾车,公交,步行的区别

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

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

 

五、全部源代码

地图路线规划服务

坐标: 

 

示例查看:

 

转载于:https://www.cnblogs.com/milkmap/p/3755257.html

你可能感兴趣的文章
sql操作命令
查看>>
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>
iOS 多线程总结
查看>>
webpack是如何实现前端模块化的
查看>>
TCP的三次握手四次挥手
查看>>
关于redis的几件小事(六)redis的持久化
查看>>
webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react开发环境
查看>>
Maven 插件
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的?
查看>>