高德地图 JS API—路线规划

高德地图 JS API—路线规划

路线规划方式有驾车、公交、步行、骑乘和货车等,本章以驾车规划为例向您介绍相关API的使用,包括:

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

获取驾车路线规划数据

驾车路线规划需要使用AMap.Driving插件,在编码前请确保引入该插件,关于该插件的引入和参考前面的教程:插件的使用

获取驾车路线规划一般有两种方式:经纬度 和 搜索关键字,下面分别介绍这两种方式。

使用经纬度获取驾车规划数据

通过传入起点和终点的经纬度信息,获取对应的驾车路线规划。假如从北京南站驾车到北京站接朋友,一次完整的查询如下:JavaScript

AMap.plugin('AMap.Driving', function() {
  var driving = new AMap.Driving({
    // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME
  })
  
  var startLngLat = [116.379028, 39.865042]
  var endLngLat = [116.427281, 39.903719]
  
  driving.search(startLngLat, endLngLat, function (status, result) {
    // 未出错时,result即是对应的路线规划方案
  })
})

如果选用其它的路线规划策略,修改创建AMap.Drivingpolicy参数即可。

使用关键字获取驾车规划数据

通过传入起点、终点的地址信息,获取对应的驾车路线规划。假如要从北京市地震局(公交站)坐车去亦庄文化园(地铁站),一次完整的查询如下:JavaScript

AMap.plugin('AMap.Driving', function() {
  var driving = new AMap.Driving({
    // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME
  })
  
  var points = [
    { keyword: '北京市地震局(公交站)',city:'北京' },
    { keyword: '亦庄文化园(地铁站)',city:'北京' }
  ]
  
  driving.search(points, function (status, result) {
    // 未出错时,result即是对应的路线规划方案
  })
})

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

添加途经点参数

前面的两节介绍了通过经纬度、关键字方式获取驾车规划数据,并且都只传入了起点和终点。实际上AMap.Driving还支持发起路线规划时传入途经点数据。使用方式请参考下面的代码示例:JavaScript

AMap.plugin('AMap.Driving', function() {
  var driving = new AMap.Driving({
    // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME
  })
  
  var points = [
    { keyword: '北京市地震局(公交站)',city:'北京' },
    { keyword: '亦庄文化园(地铁站)',city:'北京' }
  ]

  var opts = {
    // 途经点参数,最多支持传入16个途经点
    waypoints: [
      { keyword: '北京站', city:'北京' }
    ]
  }
  
  driving.search(points, opts, function (status, result) {
    // 未出错时,result即是对应的路线规划方案
  })
})

此外,除了驾车路线规划(AMap.Driving)外,货车路线规划(AMap.TruckDriving)也支持发起路线规划时传入途经点参数。

使用默认UI显示驾车路线规划

通常情况下,使用AMap.Driving获取驾车路线规划发起搜索后,需要开发者根据返回的路线方案数据结构自行显示路线详情并结合AMap.Polyline绘制到地图上。同时高德JS API还提供了默认的UI帮助开发者节省时间、提升效率,自动在地图上显示结构化的路线详情。如果您需要使用此功能,请按照下面代码示例编写即可:JavaScript

AMap.plugin('AMap.Driving', function() {
  var driving = new AMap.Driving({
    // 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式
    policy: AMap.DrivingPolicy.LEAST_TIME,
    // map 指定将路线规划方案绘制到对应的AMap.Map对象上
    map: map,
    // panel 指定将结构化的路线详情数据显示的对应的DOM上,传入值需是DOM的ID
    panel: 'panel'
  })
  
  var points = [
    { keyword: '北京市地震局(公交站)',city:'北京' },
    { keyword: '亦庄文化园(地铁站)',city:'北京' }
  ]
  
  // 搜索完成后,将自动绘制路线到地图上
  driving.search(points)
})

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

使用驾车规划拖拽插件编辑路线

除了通过经纬度和关键字进行驾车路线规划外,还可以使用拖拽插件辅助做驾车路线规划。下面是结合了拖拽插件的驾车路线规划示例:JavaScript

map.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, AMap.DrivingPolicy.LEAST_FEE)
  // 查询导航路径并开启拖拽导航
  route.search()
})

其它路线规划方式API

除驾车路线规划外,高德JS API还提供了其它几种常用的出行路线规划 API:

0 0 投票数
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x