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

路线规划 最后更新时间: 2024年07月05日

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

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

初次使用路径规划服务,建议先阅读 基础文档 并配置好你的 key 安全密钥 以确保正确访问。

驾车规划路线示例

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: [[116.397455,39.909187]], //途经点参数,最多支持传入16个途经点
  };
  driving.search(startLngLat, endLngLat, opts, function (status, result) {
    //status:complete 表示查询成功,no_data 为查询无结果,error 代表查询错误
    //查询成功时,result 即为对应的驾车导航信息
  });
});

opts参数除了可以传入经纬度外,还支持传入关键词

var opts = {
  waypoints: [{ keyword: "北京站", city: "北京" }], //途经点参数,最多支持传入16个途经点
};
提示

除了驾车路线规划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实例方法,开始路径导航。支持鼠标拖拽导航路径节点,更改途经点时,系统实时重新计算并显示导航路径

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