@[vue.js BMap 与BMapLib.lushu 的配置与百度路书，结合项目的实例展示]

上一章实现了百度轨迹的展现。今天写一个百度路书结合项目功能的实现。
(实例很全面，认真相互探讨学习)

步骤：

第一步：申请 ak, 很简单。
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

第二步：配置。
public文件夹下面的index.html页面引入百度地图与百度路书的js

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak&callback=init"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js?s=1"></script>

第三步：引入页面。

// 页面中需要引入 BMap 与 BMapLib

<template>
  <!--地图-->
  <div style='width: 100%;height: 700px;'>
       <el-select label="运输管理编号" v-model="inputForm.transportmanage.id" style="width: 300px;"  placeholder="请选择运输批次" @change="init2">
        <el-option v-for="(item,index) in transportmanageList" :key="index" :label="item.transportlot + '-' +item.productnum.productname" :value="item.id" />
      </el-select>
      <el-input id='startKeyword'  v-model='startKeyword' clearable maxlength='20' show-word-limit style='width: 400px;'/>
      <el-input id='endKeyword' v-model='endKeyword' clearable maxlength='20' show-word-limit style='width: 400px;'/>
      <!--存放地图div -->
      <div id="map_canvas"></div>
      <div id="result"></div>
       <!--按钮 -->
      <el-button id="run" @click="run">开始</el-button>
      <el-button id="stop" @click="stop">停止</el-button>
      <el-button id="pause"  @click="pause">暂停</el-button>
      <!-- <el-button id="hide" @click="hide">隐藏信息窗口</el-button>
      <el-button id="show" @click="show">展示信息窗口</el-button> -->
  </div>
</template>

<script>
  import BMap from 'BMap'
  import BMapLib from 'BMapLib'
  export default {
    name: 'index',
    data () {
      return {
        path : [{ //数组点
            'lng': 112.541993,
            'lat': 37.822504
          }, {
              'lng': 112.628662,
              'lat': 38.02281
          }, {
              'lng': 112.70708,
              'lat': 38.023748
          }, {
              'lng': 113.009629,
              'lat': 38.060038
          }, {
              'lng': 113.352889,
              'lat': 38.09286
          }, {
              'lng': 113.71081,
              'lat': 38.060209
          }, {
              'lng': 113.897227,
              'lat': 38.072481
          }, {
              'lng': 114.028882,
              'lat': 38.121267
          }, {
              'lng': 114.24771,
              'lat': 38.194384
          }, {
              'lng': 114.472825,
              'lat': 38.092136
          }, {
              'lng': 114.581917,
              'lat': 38.061173
          }],
        startPoint: { // 默认起点
          lng: '112.541993',
          lat: '37.822504'
        },
        endPoint: { // 默认终点
          lng: '114.581917',
          lat: '38.061173'
        },
        speed:1000, // 速度
        inputForm: {
          transportmanage:{
            id: '6f1e5712e4134ec7838738d0824f71bf', //默认选择项
            transportlot: '',
            startingpoint: '太原市万柏林区太原煤炭交易中心交易大楼',  // 出发地
            destination: '石家庄市长安区河钢集团石家庄钢铁有限责任公司' // 目的地
          }
        },
        startKeyword: '太原市万柏林区太原煤炭交易中心交易大楼',
        endKeyword: '石家庄市长安区河钢集团石家庄钢铁有限责任公司',
        loading: false,
        local: '',
        defaultContent: '001-钢筋',
        local2: '',
        transportmanageList: [], // 运输管理
        Lushu: '',
        map: '', // 路书
        marker: '', // 障碍物
        drv: '', // 实例化一个驾车导航用来生成路线
        pls: ''
      }
    },
    mounted () {
       this.init2()  // 路书初始化
       // this.init3()  // 路书初始化 （可添加轨迹点的路书实现）
       setTimeout(() => { // 时间等待
          this.run() // 启动
        }, 2000)
    },
    created () {
      this.getTransportmanageList()
    },
    methods: {
      // 获取运输管理数据列表
      getTransportmanageList () {
        this.loading = true
        this.$http.get(`/transportmanage/bmTransportmanagement/queryTransportmanageList`).then(response => {
          this.transportmanageList = response.data.transportmanageList
        })
        this.loading = false
      },
      init2 (value) { // 路书
          var that = this
          //给div附上地图
          that.map = new BMap.Map('map_canvas')
          //给地图加上控件
          that.map.enableScrollWheelZoom()
          that.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别
          function myFun(){
            var pp = that.local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            //this.startPoint = pp
            that.startPoint.lng = pp.lng
            that.startPoint.lat = pp.lat
            that.map.centerAndZoom(pp, 18);

          }

          function myFun2(){
            var pp = that.local2.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            //this.endPoint = pp
            that.endPoint.lng = pp.lng
            that.endPoint.lat = pp.lat
            that.map.centerAndZoom(pp, 18);
            that.map.addOverlay(new BMap.Marker(pp));    //添加标注
          }
          if(value){
            this.map.clearOverlays()    // 清除所有覆盖物
            this.marker.hide()
            this.$http.get(`/transportmanage/bmTransportmanagement/queryById?id=${value}`).then(({data}) => {
                that.startKeyword = data.bmTransportmanagement.startingpoint // 开始地点
                that.endKeyword = data.bmTransportmanagement.destination    // 结束地点
                that.defaultContent = data.bmTransportmanagement.transportlot + '-' + data.bmTransportmanagement.productnum.productname
                 that.local = new BMap.LocalSearch(that.map, { // 智能搜索
                    onSearchComplete: myFun
                 })
                that.local.search(data.bmTransportmanagement.startingpoint)
                 that.local2 = new BMap.LocalSearch(that.map, { //智能搜索
                    onSearchComplete: myFun2
                })
                that.local2.search(data.bmTransportmanagement.destination)
            })
          }
          let searchComplete = function(res) {
            if (that.drv.getStatus() == BMAP_STATUS_SUCCESS) {
                var plan = res.getPlan(0)
                var arrPois = []
                for(var j = 0; j < plan.getNumRoutes(); j++){
                    var route = plan.getRoute(j)
                    arrPois= arrPois.concat(route.getPath())
                }
                that.marker = new BMap.Marker(arrPois[0],{
                  //引入小车图标
                  icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
                })
                //展示时小车样式
                let label = new BMap.Label("运输车",{offset:new BMap.Size(0,-30)})
                label.setStyle({border:"2px red rgb(204, 204, 204)",color: "rgb(2, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(222, 255, 255)",});
                that.marker.setLabel(label);
                that.map.addOverlay(that.marker);

                that.map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}))
                that.map.setViewport(arrPois)  // 调整到最佳视野

                BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {
                let pointsArr = [initPos,targetPos];  //点数组
                let me = this,
                  //当前的帧数
                  currentCount = 0,
                  //步长，米/秒
                  timer = 10,
                  step = this._opts.speed / (1000 / timer),
                  //初始坐标
                  init_pos = this._projection.lngLatToPoint(initPos),
                  //获取结束点的(x,y)坐标
                  target_pos = this._projection.lngLatToPoint(targetPos),
                  //总的步长
                  count = Math.round(me._getDistance(init_pos, target_pos) / step);
                    //显示折线 syj201607191107
                    // 画线操作 （画轨迹）
                    this._map.addOverlay(new BMap.Polyline(pointsArr, {
                      strokeColor : "red",  // 设置颜色
                      strokeWeight : 5, // 宽度
                      strokeOpacity : 0.5 // 透明度
                    }))
                    //如果小于1直接移动到下一点
                    if (count < 1) {
                      me._moveNext(++me.i)
                      return
                    }
                    me._intervalFlag = setInterval(function() {
                      //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
                      if (currentCount >= count) {
                          clearInterval(me._intervalFlag)
                          //移动的点已经超过总的长度
                          if(me.i > me._path.length){
                              return
                          }
                          //运行下一个点
                          me._moveNext(++me.i)
                      }else {
                          currentCount++
                          let x = effect(init_pos.x, target_pos.x, currentCount, count),
                              y = effect(init_pos.y, target_pos.y, currentCount, count),
                              pos = me._projection.pointToLngLat(new BMap.Pixel(x, y))
                          //设置marker
                          if(currentCount == 1){
                              let proPos = null
                              if(me.i - 1 >= 0){
                                  proPos = me._path[me.i - 1]
                              }
                              if(me._opts.enableRotation == true){
                                  me.setRotation(proPos,initPos,targetPos)
                              }
                              if(me._opts.autoView){
                                  if(!me._map.getBounds().containsPoint(pos)){
                                      me._map.setCenter(pos)
                                  }
                              }
                          }
                          //正在移动
                          me._marker.setPosition(pos)
                          //设置自定义overlay的位置
                          me._setInfoWin(pos)
                        }
                      },timer)
                  }

                // 创建路书实例
                that.Lushu = new BMapLib.LuShu(that.map,arrPois,{
                  defaultContent: that.defaultContent, // 路书展示内容
                  autoView:true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                  // 图标设置
                  icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
                  speed: that.speed, // 速度
                  enableRotation: true, // 是否设置marker随着道路的走向进行旋转
                  landmarkPois:[
                      // 停顿点   html 展示内容   pauseTime 停留时间 3s
                      {lng:112.628662,lat:38.02281,html:'加油站',pauseTime:3}
                  ]
                })

                  that.marker.addEventListener("click",function(){
                   // that.marker.enableMassClear()   // 设置后可以隐藏改点的覆盖物
                    that.marker.hide()
                    that.Lushu.start()
                    //this.map.clearOverlays()  // 清除所有覆盖物
                })
              }
            }
            setTimeout(() => { // 时间等待
                // 实例化一个驾车导航用来生成路线
                that.drv = new BMap.DrivingRoute(that.map, {
                    onSearchComplete: searchComplete
                })
                var start = new BMap.Point(this.startPoint.lng, this.startPoint.lat);
                var end = new BMap.Point(this.endPoint.lng, this.endPoint.lat);
                that.drv.search(start, end)
            }, 1000)

          // // 判断是否有轨迹点
          // if (that.path.length == 0) {
          //   that.drv.search(start, end)
          // }else { // 添加了途经点
          //   that.drv.search(start, new BMap.Point(that.path[0].lng , that.path[0].lat) )
          //   for (let i = 0; i < that.path.length - 1; i++) {
          //     that.drv.search( new BMap.Point(that.path[i].lng , that.path[i].lat), new BMap.Point( that.path[i + 1].lng , that.path[i + 1].lat ))
          //   }
          //     that.drv.search(new BMap.Point(that.path[that.path.length - 1].lng , that.path[that.path.length - 1].lat), end)
          // }

         
      },
      init3 () { // 路书(可添加轨迹点) 
          var that = this
          //给div附上地图
          that.map = new BMap.Map('map_canvas')
          //给地图加上控件
          that.map.enableScrollWheelZoom()
          that.map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); // 初始化地图,设置中心点坐标和地图级别
          //坐标点集合
          let arrPois = []
          for (var i = 0; i < this.path.length; i++) {
            let poi = new BMap.Point(this.path[i].lng, this.path[i].lat)
            arrPois.push(poi)
          }
          this.map.setViewport(arrPois) // 调整到最佳视野

          this.marker=new BMap.Marker(arrPois[0],{
            //引入小车图标
            icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
          })
          //展示时小车样式
          let label = new BMap.Label("运输车",{offset:new BMap.Size(0,-30)})
          label.setStyle({border:"2px red rgb(204, 204, 204)",color: "rgb(2, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(222, 255, 255)",})
          this.marker.setLabel(label)
          this.map.addOverlay(this.marker)
          BMapLib.LuShu.prototype._move = function(initPos,targetPos,effect) {
          let pointsArr=[initPos,targetPos]  //点数组
          let me = this,
              //当前的帧数
              currentCount = 0,
              //步长，米/秒
              timer = 10,
              step = this._opts.speed / (1000 / timer),
              //初始坐标
              init_pos = this._projection.lngLatToPoint(initPos),
              //获取结束点的(x,y)坐标
              target_pos = this._projection.lngLatToPoint(targetPos),
              //总的步长
              count = Math.round(me._getDistance(init_pos, target_pos) / step);
          
          //显示折线 syj201607191107
          // 画线操作 （画轨迹）
          this._map.addOverlay(new BMap.Polyline(pointsArr, {
              strokeColor : "red",  // 设置颜色
              strokeWeight : 5, // 宽度
              strokeOpacity : 0.5 // 透明度
          }))
          //如果小于1直接移动到下一点
          if (count < 1) {
              me._moveNext(++me.i)
              return
          }
          me._intervalFlag = setInterval(function() {
              //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
              if (currentCount >= count) {
                  clearInterval(me._intervalFlag)
                  //移动的点已经超过总的长度
                  if(me.i > me._path.length){
                      return
                  }
                  //运行下一个点
                  me._moveNext(++me.i)
              }else {
                  currentCount++
                  let x = effect(init_pos.x, target_pos.x, currentCount, count),
                      y = effect(init_pos.y, target_pos.y, currentCount, count),
                      pos = me._projection.pointToLngLat(new BMap.Pixel(x, y))
                  //设置marker
                  if(currentCount == 1){
                      let proPos = null
                      if(me.i - 1 >= 0){
                          proPos = me._path[me.i - 1]
                      }
                      if(me._opts.enableRotation == true){
                          me.setRotation(proPos,initPos,targetPos)
                      }
                      if(me._opts.autoView){
                          if(!me._map.getBounds().containsPoint(pos)){
                              me._map.setCenter(pos)
                          }
                      }
                  }
                  //正在移动
                  me._marker.setPosition(pos)
                  //设置自定义overlay的位置
                  me._setInfoWin(pos)
              }
          },timer)
         }
          // 创建路书实例
          this.Lushu = new BMapLib.LuShu(this.map,arrPois,{
            defaultContent: "运输车一", // 路书展示内容
            autoView:true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            // 图标设置
            icon  : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
            speed: this.speed, // 速度
            enableRotation: true, // 是否设置marker随着道路的走向进行旋转
            landmarkPois:[
                // 停顿点   html 展示内容   pauseTime 停留时间 3s
                {lng:112.628662,lat:38.02281,html:'加油站',pauseTime:3}
            ]
          })
          this.marker.addEventListener("click",function(){
           // this.marker.enableMassClear()   // 设置后可以隐藏改点的覆盖物
            this.marker.hide()
            this.Lushu.start()
            //this.map.clearOverlays()  // 清除所有覆盖物
          })
      },
      //绑定事件
      run () {
        // this.map.clearOverlays()    // 清除所有覆盖物
        // this.marker.enableMassClear() // 设置后可以隐藏改点的覆盖物
        this.marker.hide()
        this.Lushu.start()
      },
      stop () {
        this.Lushu.stop()
      },
      pause () {
        this.Lushu.pause()
      },
      hide () {
        this.Lushu.hideInfoWindow()
      },
      show () {
        this.Lushu.showInfoWindow()
      }
    }
  }
</script>
<style scoped>
 
  body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
  #map_canvas{width:100%;height:700px;}
  #result {width:100%}

   #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    ul li {
        list-style: none;
    }
    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 90px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {

        color: #fff;
    }
</style>

效果展示