JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）

         关于车辆的轨迹回放功能方法，主要分为两种，一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；两种方法，各有各的优缺点，前者是比较简单，但是不能在中途控制速度；后者的功能比较全面，但是目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器，而且巡航作为动画过程是非常耗费性能的。

        下面我将用不同的方法来实现这个轨迹回放，首先使用一个简单标记点的方法，效果如下：

 具体的代码如下：

function initLine() {
   //首先需要得到一串线路的定位点的数组，如： lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];

   //其次如果需要在车辆移动时展示信息框中每个点的信息，那就需要有个信息框的数据信息：如gpsLocus = [{gdLongitude:116.478935,gdLatitude:39.997761,code:'0',time:'2021-07-28 14:12'},{gdLongitude:116.478939,gdLatitude:39.997825,code:'1',time:'2021-07-28 14:13'}]等等，我就不一一写出来了，总之线路点的经纬度要与信息框的经纬度一一对应才行

      if (trackMarker) {
        // 1、清空之前数据
        map.remove(trackMarker)
        map.remove(trackPolyline)
        map.remove(passedPolyline)
        if (carWindow) {
          carWindow.close()
        }

      }

      //2、创建汽车点位点
      const position = 线路数据的第一个点的经纬度，如：lineArr[0]
     trackMarker = new AMap.Marker({
        map: map,
        position: position,
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      })

      // 3、创建信息框
     carWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(6, -25),
        content: ''
      })

      // 4、绘制轨迹trackPolyline，这个轨迹是相当于总览展示，如果要控制是否显示整条线路的话，可以通过线路的show()和hide()方法控制
     trackPolyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F',  //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
        zIndex: 99999,
      })

      // 5、绘制行驶后的颜色
      passedPolyline = new AMap.Polyline({
        map: map,
        strokeColor: '#AF5',  //线颜色
        strokeWeight: 6,      //线宽
        zIndex: 99999,
      })

      // 行驶过后改变颜色
      trackMarker.on('moving', (e) => {
       passedPolyline.setPath(e.passedPath)

      })
      // 6.信息框随车辆移动
      AMap.event.addListener(trackMarker, 'moving', (e) => {
        var lastLocation = e.passedPath[e.passedPath.length - 1]
        carWindow.setPosition(lastLocation)
        //调用信息框的信息，进行对比
       etVehicleSpeedInWidowns(lastLocation)
      })
      // 7.打开速度框
      carWindow.open(map,trackMarker.getPosition())
      // 8.地图自适应缩放
      map.setFitView(trackMarker)
      map.setZoom(10)
    }

        //对比信息框的经纬度与移动中经纬度是否相同，相同就把信息框里的内容展示出来
       function etVehicleSpeedInWidowns (lnglat) {
             for (var i = 0; i < gpsLocus.length; i++) {
        if (lnglat.lat == gpsLocus[i].gdLatitude && lnglat.lng == gpsLocus[i].gdLongitude) {
          const info = trackInfo(gpsLocus[i])
            carWindow.setContent(info.join(''))
          return
        }
      }
    },

    //信息框里的内容自定义
    function  trackInfo (obj) {
      const info = []
      info.push(`<p  style='min-width:200px;'   class='input-item'>设备号 :${obj.code || '未知'}</p>`)
  info.push(`<p  style='min-width:200px;'   class='input-item'>时间:${obj.time|| '未知'}</p>`)
      return info
    }

这里准备工作就做的差不多了，接下来就是控制车辆的运动了：

    //调用开始动画的方法
 function startAnimation () {
        trackMarker.moveAlong(lineArr, 200);//lineArr:指小车运行的路线，200：指运行速度，单位千米/小时
    }
 //暂停动画的方法
    function pauseAnimation () {
        trackMarker.pauseMove();
    }
//继续动画的方法
    function resumeAnimation () {
        trackMarker.resumeMove();
    }
//停止动画的方法
    function stopAnimation () {
        trackMarker.stopMove();
    }

//所以要想动画动起来，就直接调用startAnimation()