腾讯地图轨迹回放

<template>
  <div class="container">
    <div id="map"></div>
  </div>
</template>

<script>
import TMap from "@/utils/initMap";
export default {
  name: 'pathMap',
  data() {
    return {
      TXMap:null,
      tMap:null,
      markerLayer:null,
      editor:null,
      carPath:[],
      polylineLayer:null
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.init()
      setTimeout(()=>{
        this.lookCarPath()
      },250)
    })
  },
  methods: {
    init(){
      TMap.init().then((TMap) => {
        this.TXMap = TMap;
        this.tMap = new TMap.Map("map", {
          center: new TMap.LatLng(23.030886,113.757800), //设置地图中心点坐标
          zoom: 15, //设置地图缩放级别
          viewMode: "3D",
        });
      });
    },
    lookCarPath(){
      let path = [
        new this.TXMap.LatLng(23.030886,113.757800),
        new this.TXMap.LatLng(23.031128,113.758686),
        new this.TXMap.LatLng(23.031369,113.759726),
        new this.TXMap.LatLng(23.031177,113.760241),
        new this.TXMap.LatLng(23.030362,113.760815),
        new this.TXMap.LatLng(23.029602,113.761277),
        new this.TXMap.LatLng(23.028506,113.761722),
        new this.TXMap.LatLng(23.026847,113.762156),
        new this.TXMap.LatLng(23.025687,113.762886),
        new this.TXMap.LatLng(23.025193,113.762977),
        new this.TXMap.LatLng(23.023944,113.761582),
        new this.TXMap.LatLng(23.022310,113.758718),
        new this.TXMap.LatLng(23.021802,113.755826),
        new this.TXMap.LatLng(23.021806,113.754957),
        new this.TXMap.LatLng(23.018212,113.754147),
        new this.TXMap.LatLng(23.014534,113.753600),
        new this.TXMap.LatLng(23.013309,113.757248),
        new this.TXMap.LatLng(23.011690,113.760037),
        new this.TXMap.LatLng(22.994348,113.747377),
        new this.TXMap.LatLng(22.985222,113.737679),
        new this.TXMap.LatLng(22.968588,113.718839),
        new this.TXMap.LatLng(22.967798,113.709869),
        new this.TXMap.LatLng(22.969852,113.701200),
        new this.TXMap.LatLng(22.972026,113.698239),
        new this.TXMap.LatLng(22.964321,113.695750),
        new this.TXMap.LatLng(22.955390,113.687339),
        new this.TXMap.LatLng(22.946736,113.678713),
        new this.TXMap.LatLng(22.937211,113.670259),
        new this.TXMap.LatLng(22.925591,113.663907),
        new this.TXMap.LatLng(22.920769,113.662019),
        new this.TXMap.LatLng(22.902862,113.661718),
        new this.TXMap.LatLng(22.888669,113.660002),
        new this.TXMap.LatLng(22.873249,113.662448),
        new this.TXMap.LatLng(22.859132,113.671460)
      ]
      let carImg = '~@/../car.png'
      let map = this.tMap
      this.polylineLayer = new this.TXMap.MultiPolyline({
        map, // 绘制到目标地图
        // 折线样式定义
        styles: {
          style_blue: new this.TXMap.PolylineStyle({
            color: '#3777FF', // 线填充色
            width: 4, // 折线宽度
            borderWidth: 2, // 边线宽度
            borderColor: '#FFF', // 边线颜色
            lineCap: 'round', // 线端头方式
            eraseColor: 'rgba(190,188,188,1)',
          }),
        },
        geometries: [
          {
            id: 'erasePath',
            styleId: 'style_blue',
            paths: path,
          },
        ],
      });
      this.markerLayer = new this.TXMap.MultiMarker({
        map,
        styles: { //样式设置
          'car-down': new this.TXMap.MarkerStyle({
            'width': 40,  //小车图片宽度（像素）
            'height': 40, //高度
            'anchor': {   //图片中心的像素位置（小车会保持车头朝前，会以中心位置进行转向）
              x: 20,y: 20,
            },
            'faceTo': 'map',  //取’map’让小车贴于地面，faceTo取值说明请见下文图示
            'rotate': 180,    //初始小车朝向（正北0度，逆时针一周为360度，180为正南）
            'src': carImg,   //小车图片（图中小车车头向上，即正北0度）
          }),
          start: new this.TXMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
          }),
          end: new this.TXMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png',
          })
        },
        geometries: [
          {    //小车marker的位置信息
            id: 'car',      //因MultiMarker支持包含多个点标记，因此要给小车一个id
            styleId: 'car-down',    //绑定样式
            position: new this.TXMap.LatLng(23.030886,113.757800),//初始坐标位置
          },
          {
            id: 'start',
            styleId: 'start',
            position: new this.TXMap.LatLng(23.030886,113.757800),
          },
          {
            id: 'end',
            styleId: 'end',
            position: new this.TXMap.LatLng(22.859132,113.671460),
          }
        ]
      });

      //调用moveAlong，实现小车移动
      this.markerLayer.moveAlong({
          "car": {    //设置让"car"沿"path"移动，速度70公里/小时
              path,
              speed: 90
          }
        }, {
          autoRotation:true   //车头始终向前（沿路线自动旋转）
        }
      )
      this.markerLayer.on('moving', (e) => {
        console.log(e)
        var passedLatLngs = e.car && e.car.passedLatLngs;
        if (passedLatLngs) {
          // 使用路线擦除接口 eraseTo, https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector
          this.polylineLayer.eraseTo(
            'erasePath',
            passedLatLngs.length - 1,
            passedLatLngs[passedLatLngs.length - 1]
          );
        }
      });
    },
  }
}
</script>