路线规划 | 您所在的位置:网站首页 › 地图绘制路线叫什么 › 路线规划 |
路线规划的方式有多种,包括驾车、公交、步行、骑乘和货车等。每种路线规划方式都有相对应的插件。本文以驾车路线规划服务插件AMap.Driving为例,向你介绍: 获取驾车路线规划数据使用默认 UI 显示驾车路线详情使用驾车规划拖拽插件AMap.DragRoute编辑路线其它路线规划插件介绍驾车规划路线示例亲手试一试 下载完整代码 1、获取驾车路线规划数据在使用插件之前,需要先引入插件。本文的所有示例均采用异步引入的方式。有关该插件的更多引入方式前往 插件的使用。 获取驾车路线规划一般有两种方式:关键字和经纬度,下面将分别介绍这两种方式。 1.1 使用关键字获取驾车规划数据通过传入起点、终点的地址信息,获取对应的驾车路线规划。假如要从北京市地震局(公交站)坐车去亦庄文化园(地铁站),一次完整的查询如下: AMap.plugin("AMap.Driving", function () { var driving = new AMap.Driving({ policy: 0, //驾车路线规划策略,0是速度优先的策略 }); var points = [ { keyword: "北京市地震局(公交站)", city: "北京" }, { keyword: "亦庄文化园(地铁站)", city: "北京" }, ]; driving.search(points, function (status, result) { //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误 //查询成功时,result 即为对应的驾车导航信息 }); });提示如果选用其它的路线规划策略,修改创建AMap.Driving的policy参数即可。其它policy参数请参考 驾车策略 strategy 字段。 查看 result 相关数据结构 查看AMap.Driving所有属性和方法 1.2 使用经纬度获取驾车规划数据通过传入起点和终点的经纬度信息,获取对应的驾车路线规划。假如从北京南站驾车到北京站接朋友,一次完整的查询如下: AMap.plugin("AMap.Driving", function () { var driving = new AMap.Driving({ policy: 0, //驾车路线规划策略,0是速度优先的策略 }); var startLngLat = [116.379028, 39.865042]; //起始点坐标 var endLngLat = [116.427281, 39.903719]; //终点坐标 driving.search(startLngLat, endLngLat, function (status, result) { //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误 //查询成功时,result 即为对应的驾车导航信息 }); });提示如果选用其它的路线规划策略,修改创建AMap.Driving的policy参数即可。其它policy参数请参考 驾车策略 strategy 字段。 查看 result 相关数据结构 查看AMap.Driving所有属性和方法 示例中心 1.3 添加途经点参数前面两节介绍了通过经纬度、关键字方式获取驾车规划数据,并且都只传入了起点和终点。实际上AMap.Driving还支持发起路线规划时传入途经点数据同样支持关键字和经纬度两种写法。使用方式请参考下面的代码示例: 使用关键字方式添加途径点 AMap.plugin("AMap.Driving", function () { var driving = new AMap.Driving({ policy: 0, //驾车路线规划策略,0是速度优先的策略 }); var points = [ { keyword: "北京市地震局(公交站)", city: "北京" }, //起始点 { keyword: "北京站", city: "北京" }, //设置途经点参数,最多支持传入16个途经点 { keyword: "亦庄文化园(地铁站)", city: "北京" }, //终点 ]; driving.search(points, function (status, result) { //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误 //查询成功时,result 即为对应的驾车导航信息 }); });提示points参数数组第一个元素和最后一个元素作为起点和终点,中间元素为途经点,最多支持传入16个途经点。 使用经纬度方式添加途径点 AMap.plugin("AMap.Driving", function () { var driving = new AMap.Driving({ policy: 0, //驾车路线规划策略,0是速度优先的策略 }); var startLngLat = [116.379028, 39.865042]; //起始点坐标 var endLngLat = [116.427281, 39.903719]; //终点坐标 var opts = { waypoints: [{ keyword: "北京站", city: "北京" }], //途经点参数,最多支持传入16个途经点 }; driving.search(startLngLat, endLngLat, opts, function (status, result) { //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误 //查询成功时,result 即为对应的驾车导航信息 }); });opts参数除了可以传入关键词外,还支持传入经纬度的写法 var opts = { //途经点参数,最多支持传入16个途经点 waypoints: [[116.397455,39.909187]], };提示除了驾车路线规划AMap.Driving外,货车路线规划AMap.TruckDriving也支持发起路线规划时传入途经点参数。 2、使用默认 UI 显示驾车路线规划使用AMap.Driving获取驾车路线规划发起搜索后,需要开发者根据返回的路线方案数据结构自行显示路线详情并结合AMap.Polyline绘制到地图上。为了帮助开发者节省时间、提升效率 JS API 提供了默认的 UI,自动在地图上显示结构化的路线详情。如果你需要使用此功能,请按照下面代码示例编写即可: AMap.plugin("AMap.Driving", function () { var driving = new AMap.Driving({ //驾车路线规划策略,0是速度优先的策略 policy: 0, //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上 map: map, //panel 指定将结构化的路线详情数据显示的对应的 DOM 上,传入值需是 DOM 的 ID panel: "my-panel", }); var points = [ { keyword: "北京市地震局(公交站)", city: "北京" }, { keyword: "亦庄文化园(地铁站)", city: "北京" }, ]; //搜索完成后,将自动绘制路线到地图上 driving.search(points); });注意panel参数值为你页面定义容器的 id 值 。 提示如果选用其它的路线规划策略,修改创建AMap.Driving的policy参数即可。其它policy参数请参考 驾车策略 strategy 字段。 查看AMap.Driving所有属性和方法 3、使用驾车规划拖拽插件编辑路线除了通过经纬度和关键字进行驾车路线规划外,还可以使用拖拽插件辅助做驾车路线规划。下面是结合了拖拽插件的驾车路线规划示例: 亲手试一试 下载完整代码 AMap.plugin("AMap.DragRoute", function () { //path 是驾车导航的起、途径和终点,最多支持16个途经点 var path = []; path.push([116.303843, 39.983412]); path.push([116.321354, 39.896436]); path.push([116.407012, 39.992093]); var route = new AMap.DragRoute(map, path, 0); //查询导航路径并开启拖拽导航 route.search(); });提示AMap.DragRoute构造函数的参数分别为:map指定的地图对象,path指定导航的起点、途经点、终点的经纬度坐标数组,0指定驾车策略。目前AMap.DragRoute插件仅支持桌面浏览器。 查看AMap.DragRoute所有属性和方法 4、其它路线规划插件介绍除驾车路线规划外,高德 JS API 还提供了其它几种常用的出行路线规划 公交路线规划AMap.Transfer公交规划参考手册 公交规划相关示例 步行路线规划AMap.Walking步行规划参考手册 步行规划相关示例 骑行路线规划AMap.Riding骑行规划参考手册 骑行规划相关示例 货车路线规划AMap.TruckDriving货车规划参考手册 说明货车路径规划为收费服务接口,如果你想要测试或使用,请通过工单系统提交商务合作类 工单 进行沟通 5、本章涉及的属性及方法说明5.1 AMap.Driving参数/方法 说明 类型 policy 驾车路线规划策略 Number map 展现结果的地图实例。当指定此参数后,搜索结果的标注、线路等均会自动添加到此地图上 AMap.Map panel 结果列表的 HTML 容器id或容器元素,提供此参数后,结果列表将在此容器中进行展示。 String| HTMLElement| Boolean search() 此为Driving实例方法,根据起点、终点和途经点(可选)坐标或名称,实现驾车路线规划 Function 查看所有AMap.Driving属性和方法 5.2 AMap.DragRoute方法 说明 AMap.DragRoute(map, path, 0) 此为DragRoute静态方法,map为指定的地图对象,path指定导航的起点、途经点、终点的经纬度坐标数组,0指定驾车策略 search() 此为DragRoute实例方法,开始路径导航。支持鼠标拖拽导航路径节点,更改途经点时,系统实时重新计算并显示导航路径 查看所有AMap.DragRoute属性和方法 |
CopyRight 2018-2019 实验室设备网 版权所有 |