开发 地图 JS API 2.0 进阶教程 服务插件和工具 路线规划

路线规划 最后更新时间: 2024年01月25日

路线规划的方式有多种,包括驾车、公交、步行、骑乘和货车等。每种路线规划方式都有相对应的插件。本文以驾车路线规划服务插件AMap.Driving为例,向你介绍:

  1. 获取驾车路线规划数据
  2. 使用默认 UI 显示驾车路线详情
  3. 使用驾车规划拖拽插件AMap.DragRoute编辑路线
  4. 其它路线规划插件介绍

驾车规划路线示例

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.Drivingpolicy参数即可。其它policy参数请参考  驾车策略 strategy 字段

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.Drivingpolicy参数即可。其它policy参数请参考  驾车策略 strategy 字段

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 值 <div id="my-panel"></div>

提示

如果选用其它的路线规划策略,修改创建AMap.Drivingpolicy参数即可。其它policy参数请参考  驾车策略 strategy 字段

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插件仅支持桌面浏览器。

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

5.2 AMap.DragRoute

方法

说明

AMap.DragRoute(map, path, 0)

此为DragRoute静态方法,map为指定的地图对象,path指定导航的起点、途经点、终点的经纬度坐标数组,0指定驾车策略 

search()

此为DragRoute实例方法,开始路径导航。支持鼠标拖拽导航路径节点,更改途经点时,系统实时重新计算并显示导航路径

返回顶部 示例中心 常见问题 智能客服 公众号
二维码