Vue地图轨迹回放技术分享，包含：移动端小程序、Pc端

//创建地图盒子
<map id=‘map‘ :latitude="latitude" :longitude="longitude" :markers="covers" :style="{ width: ‘100%‘, height: mapHeight + ‘px‘ }":scale="13" :polyline="polyline"></map>

// 地图标记点，展示静态车辆Marker点及顶部车牌信息
covers: [{
　　id: 1,
　　width: 42,
　　height: 47,
　　rotate: 270,
　　latitude: 34.259428,
　　longitude: 108.947040,
　　iconPath: ‘http://cdn.zhoukaiwen.com/car.png‘,
　　callout: {
　　　　content: "陕A·88888", // 车牌信息
　　　　display: "ALWAYS",
　　　　fontWeight: "bold",
　　　　color: "#5A7BEE", //文本颜色
　　　　fontSize: "12px",
　　　　bgColor: "#ffffff", //背景色
　　　　padding: 5, //文本边缘留白
　　　　textAlign: "center",
　　},
　　anchor: {
　　　　x: 0.5,
　　　　y: 0.5,
　　},
}]

// 轨迹坐标点数据
coordinate: [{
    latitude: 34.259428,
    longitude: 108.947040,
    problem: false,
},
{
    latitude: 34.252918,
    longitude: 108.946963,
    problem: false,
},
{
    latitude: 34.252408,
    longitude: 108.946240,
    problem: false,
}]

// 生命周期onReady()时，创建map对象
this.map = uni.createMapContext(‘map‘);

//轨迹回放方法，执行此方法即可
_this.map.translateMarker({
    markerId: 1,
    autoRotate:true,
    destination: {
        longitude: datai.longitude, // 车辆即将移动到的下一个点的经度
        latitude: datai.latitude, // 车辆即将移动到的下一个点的纬度
    },
    duration: 700,
    complete: function(){
        _this.playIndex++;
        if(_this.playIndex < len){
            _this.start(_this.playIndex, data);
    }else{
        console.log(‘轨迹已播放‘);
        uni.showToast({
            title: ‘播放完成‘,
            duration: 1400,
            icon: ‘none‘
            });
    }
    },
    animationEnd: function() {
        // 轨迹回放完成
    },
    fail(e) {
        // 轨迹回放失败
    },
});