高德地图轨迹回放，消息框内展示车辆速度且随车辆移动-升级支持调整速度、回放进度

使用高德地图回放车辆GPS轨迹，并添加速度和回放进度条，并支持调整，效果如下：

示例.gif

新增的功能：

在基础版本，有如下升级

1. 速度条：可以拖动以调整车辆回放速度，且从当前位置继续回放
2. 进度条：进度条表示车辆已回放的百分比，且拖动进度条车辆定位到相应的位置并继续回放

思路分析

• 高德和marker回放相关的API

//主要靠他回放
moveAlong(path:Array,speed:Number,f:Function,circlable:Boolean)
//点移动到另一个位置，移动进度条车辆跟随移动
moveTo(lnglat:[LngLat],speed:Number, f:Function)
//停止播放
stopMove()
//继续播放 未用到
resumeMove()

未发现可以从指定点开始播放的API，所以只能迂回下了

• 假设我们得知从第100个点，开始回放；可以停止当前回放，并且从截取100到最后 的轨迹点，生成一个临时轨迹，让marker来moveAlong
• 所以在我们拖动速度条后，需要知道当前回放到哪个点
• 所以在我们拖动进度条后，需要知道当前回放到哪个点
• 进度条随车辆回放变化，需要知道当期回放到哪个点，再除以轨迹点总个数以设置回放百分比

所以关键是获取当前回放到哪个点，如下即可解决该问题

AMap.event.addListener(carMarker, 'moving', function (e) {
        console.log("当前已回放: "+ e.passedPath.length)
    });

关于进度条本文用的是 ion.rangeSlider，示例和用法大家可以参考官网，很简单
主要用到如下事件，我写了中文备注，大家也可以参考官网的示例

    $("#demo_0").ionRangeSlider({
        skin: "big",
        min: 0,
        max: 10,
        from: 5,
        onStart: function (data) {
            // fired then range slider is ready
        },
        onChange: function (data) {
            // fired on every range slider update-用鼠标拖动进度条时触发
        },
        onFinish: function (data) {
            // fired on pointer release-用鼠标拖动进度条后，释放鼠标触发
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method-用JS方法更新进度条值后触发
        }
    });

那么实现思路就很清晰了

• 车辆移动，进度条跟随变化：当前车辆已回放点的个数➗轨迹点总个数 （代码137行）
• 修改速度，车辆从当前位置按新速度回放: 当前车辆停止回放，从当期位置到最后重新生成一段线路，车辆根据新轨迹回放
• 修改进度，车辆定位到相应位置：根据进度条的百分比✖️轨迹总个数，即可定位到当前百分比对应的轨迹点，将车辆移动到该位置即可（onUpdate事件）
• 修改进度后，车辆从当前位置回放：根据进度条的百分比✖️轨迹总个数，得到当前位置，生成从当前位置到最后的路径，并回放即可（onFinish事件）

源码如下

    
        
        
        
        

        
        
        
        
        
        
        
        
        

    




    

        
        

    
    

        
        

    
    

        暂停
        播放