百度地图-驾车路线规划及轨迹回放

悦E佳

已于 2023-10-08 11:59:13 修改

阅读量642

点赞数 1

分类专栏：百度地图文章标签：前端

于 2023-10-08 11:57:24 首次发布

本文链接：https://blog.csdn.net/azj123123azj/article/details/133675171

版权

百度地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、前置条件

1、使用地图

2、引入路书-轨迹回放

html引入

其他方式引入

二、代码实现

// 路线规划 -  轨迹回放
var myP1 = new BMap.Point(114.03, 22.611); //起点-深圳北
var myP3 = new BMap.Point(116.404449, 39.920423); //终点-北京

//
var pts = [];
// track();
function track() {
  addMarker(); //  marker

  // 路线规划方式	类名	简介
  // 驾车 DrivingRoute	提供驾车路线规划服务
  // 公交	TransitRoute	提供市内公交和跨城交通方式（飞机、火车、大巴）的路线规划服务
  // 步行	WalkingRoute	提供步行路线规划服务
  // 骑行 RidingRoute  提供骑行线路规划服务
  var driving = new BMap.DrivingRoute(map); //创建驾车实例
  driving.search(myP1, myP3); //驾车搜索
  // 回调
  driving.setSearchCompleteCallback(() => {
    // 获取结果第一条方案  results.getPlan(0);
    // 获取方案的驾车线路   plan.getRoute(0);
    // getPath 路线点集合
    pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组

    // 获取每个关键步骤，
    getSteps(driving);

    //  添加路线
    var polyline = new BMap.Polyline(pts);
    map.addOverlay(polyline);

    LuShu(); // 轨迹播放
  });
}
function getSteps(driving) {
  // 关键步骤：每个步骤包含经纬度和提示信息
  var route = driving.getResults().getPlan(0).getRoute(0);
  var s = [];
  for (var i = 0; i < route.getNumSteps(); i++) {
    s.push(route.getStep(i));
  }
  // console.log(s);
  // 关键步骤 做其他使用...  例如提示等
}
function LuShu() {
  //  百度路书，加个小车的icon，让图动起来
  // 参数：url，size，配置
  var icon = new BMap.Icon(
    'http://developer.baidu.com/map/jsdemo/img/car.png',
    new BMap.Size(32, 32),
    { anchor: new BMap.Size(15, 15) }
  );
  // 参数： 地图 点集合 配置
  new BMapLib.LuShu(map, pts, {
    defaultContent: '深圳到北京', //覆盖物的内容
    speed: 5000, //路书速度
    icon: icon, //覆盖物图标，默认是百度的红色地点标注
    autoView: false, //自动调整路线视野
    enableRotation: true, //覆盖物随路线走向
    // landmarkPois ：必要参数  可以为空数组 否则报错
    landmarkPois: [{ lng: 114.03, lat: 22.611, html: 'tips', pauseTime: 2 }],
  }).start(); //启动路书函数
}

function addMarker() {
  var m1 = new BMap.Marker(myP1); //创建 marker
  var m3 = new BMap.Marker(myP3);

  map.addOverlay(m1);
  map.addOverlay(m3);

  var lab1 = new BMap.Label('起点-深圳', { position: myP1 }); //创建 label
  var lab3 = new BMap.Label('终点-北京', { position: myP3 });
  map.addOverlay(lab1);
  map.addOverlay(lab3);
}