VUE引入腾讯地图并实现轨迹动画的详细步骤

 #container { width: 100%; height: calc(100vh - 280px); border-radius: 10px; overflow: hidden; }

 mounted() { this.initMap() }, methods: { initMap() { //设置地图中心点 let center = new TMap.LatLng(39.984104, 116.307503); // 初始化地图 this.map = new TMap.Map('container', { zoom: 15, center: center, // baseMap: {  // 设置卫星地图 //   type: 'satellite' // } }); this.polylineLayer = new TMap.MultiPolyline({ map:this.map, // 绘制到目标地图 // 折线样式定义 styles: { style_blue: new TMap.PolylineStyle({ color: '#ff8d00', // 线填充色 width: 4, // 折线宽度 borderWidth: 2, // 边线宽度 borderColor: '#FFF', // 边线颜色 lineCap: 'round', // 线端头方式 eraseColor: 'rgb(172,172,172)',//擦除路径的颜色 }), }, geometries: [ { id: 'erasePath', styleId: 'style_blue', paths: this.path, }, ], }); this.marker = new TMap.MultiMarker({ map:this.map, // 绘制到目标地图 styles: { 'car-down': new TMap.MarkerStyle({ width: 40, height: 40, anchor: { x: 20, y: 20, }, faceTo: 'map', rotate: 180, src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png-600', }), start: new TMap.MarkerStyle({ width: 25, height: 35, anchor: {x: 16, y: 32}, src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png-600', }), end: new TMap.MarkerStyle({ width: 25, height: 35, anchor: {x: 16, y: 32}, src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png-600', }), }, geometries: [ { id: 'car', styleId: 'car-down', position: new TMap.LatLng(39.98481500648338, 116.30571126937866), }, { id: 'start', styleId: 'start', position: new TMap.LatLng(39.98481500648338, 116.30571126937866), }, { id: 'end', styleId: 'end', position: new TMap.LatLng(39.978813710266024, 116.31699800491333), }, ], }); } }

 // 暂停动画      pauseMove() {         this.marker.pauseMove()       },      // 停止动画       resumeMove() {         this.marker.resumeMove()       },      // 开始动画       startCar() {         // 使用marker 移动接口， https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker         //调用moveAlong动画 执行标记点动画开始         this.marker.moveAlong(           {             car: {               path: this.path,//移动路径的坐标串               // duration:8000,//完成移动所需的时间，单位：毫秒               speed: 250, //speed为指定速度，正整数，单位：千米/小时             },           },           {             autoRotation: true,//自动旋转           }         );         //监听事件名         this.marker.on('moving', (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]             );           }         });         },