百度地图路书实现轨迹播放，停止，暂停。可根据下拉框改变播放的速度。

代码参考 https://www.cnblogs.com/syj2016/p/5685294.html

代码贴上

html：

                        <button id="run">开始</button>
                        <button id="stop">停止</button>
                        <button id="pause">暂停</button>
                        @*<button id="hide">隐藏信息窗口</button>
                        <button id="show">展示信息窗口</button>*@
                        <select id="speed">
                            <option value="1500">请选择</option>
                            <option value="6500">超级快</option>
                            <option value="5500">很快</option>
                            <option value="1500">很慢</option>
                            <option value="100">超级慢</option>
                        </select>
                        <div id="result"></div>

                        <div id="container" style="width:100%;height:650px;"></div>

 

js部分：

引用百度地图路书<script src="~/Scripts/LuShu_min.js"></script>

从后台获取坐标点：

var  arrPois=[];//全局变量保存坐标点

        function GetPosition(cph) {
            $('#myModal3').modal('show');
            points = [];
            $.ajax({
                url: '/YCYSJL/GetPosition?cph='+cph,
                type: 'GET',
                cache: false,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        arrPois.push(new BMap.Point(data[i].Latitude, data[i].Longitude));//后台取数
                    }
                        play();播放方法

                    $('#myModal3').on('hide.bs.modal', function () {
                        lushu.stop();
                        map.clearOverlays();//清除图层覆盖物
                     })


                },
                error: function () {
                    alert("获取失败！");
                }

            });

play方法：

 //获取经纬度
        var arrPois = [];      
        var marker;
        var map = new BMap.Map('container');
        map.enableScrollWheelZoom();
        map.centerAndZoom();
        var lushu;
        var speeds;
        var temp;
        speeds = $("#speed").val();;
        function play() {
            map.setViewport(arrPois);
            marker = new BMap.Marker(arrPois[0], {
                icon: new BMap.Icon('../images/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) })
            });
            //var label = new BMap.Label("京A30780", { offset: new BMap.Size(0, -30) });
            //label.setStyle({ border: "1px solid rgb(204, 204, 204)", color: "rgb(0, 0, 0)", borderRadius: "10px", padding: "5px", background: "rgb(255, 255, 255)", });
            //marker.setLabel(label);


            map.addOverlay(marker);
            BMapLib.LuShu.prototype._move = function (initPos, targetPos, effect) {
                var pointsArr = [initPos, targetPos];  //点数组
                var me = this,
                    //当前的帧数
                    currentCount = 0,
                    //步长，米/秒
                    timer = 10,
                    step = this._opts.speed / (1000 / timer),
                    //初始坐标
                    init_pos = this._projection.lngLatToPoint(initPos),
                    //获取结束点的(x,y)坐标
                    target_pos = this._projection.lngLatToPoint(targetPos),
                    //总的步长
                    count = Math.round(me._getDistance(init_pos, target_pos) / step);
                //显示折线 syj201607191107
                this._map.addOverlay(new BMap.Polyline(pointsArr, {
                    strokeColor: "red",//此处也可以用变量，实现根据车速改变轨迹颜色发生变化；
                    strokeWeight: 2,
                    strokeOpacity: 0.5
                })); // 画线 
                //如果小于1直接移动到下一点
                if (count < 1) {
                    me._moveNext(++me.i);
                    return;
                }
                me._intervalFlag = setInterval(function () {
                    //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
                    if (currentCount >= count) {
                        clearInterval(me._intervalFlag);
                        //移动的点已经超过总的长度
                        if (me.i > me._path.length) {
                            return;
                        }
                        //运行下一个点
                        me._moveNext(++me.i);
                    } else {
                        currentCount++;
                        var x = effect(init_pos.x, target_pos.x, currentCount, count),
                            y = effect(init_pos.y, target_pos.y, currentCount, count),
                            pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
                        //设置marker
                        if (currentCount == 1) {
                            var proPos = null;
                            if (me.i - 1 >= 0) {
                                proPos = me._path[me.i - 1];
                            }
                            if (me._opts.enableRotation == true) {
                                me.setRotation(proPos, initPos, targetPos);
                            }
                            if (me._opts.autoView) {
                                if (!me._map.getBounds().containsPoint(pos)) {
                                    me._map.setCenter(pos);
                                }
                            }
                        }
                        //正在移动
                        me._marker.setPosition(pos);
                        //设置自定义overlay的位置
                        me._setInfoWin(pos);
                    }
                }, timer);
            };




            lushu = new BMapLib.LuShu(map, arrPois, {
                defaultContent: "京A30780",//"从天安门到百度大厦"
                autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                icon: new BMap.Icon('../images/car.png', new BMap.Size(52, 26), { anchor: new BMap.Size(27, 13) }),
                speed: speeds,
                enableRotation: true,//是否设置marker随着道路的走向进行旋转
                landmarkPois: [
                { lng: 116.306954, lat: 40.05718, html: '加油站', pauseTime: 2 }
                ]  //车辆到这个点暂停2s，坐标可写成自己想要的，也可以从数组动态获取；


            });
            map.centerAndZoom(arrPois[0], 15);//设置初始点为中心
            marker.addEventListener("click", function () {
                marker.enableMassClear();   //设置后可以隐藏改点的覆盖物
                marker.hide();
                lushu.start();
                //map.clearOverlays();  //清除所有覆盖物
            });
            //下拉框值的改变
            $("#speed").change(function () {
                lushu._opts.speed = $("#speed").val();//改变路书播放速度
            });
            $("#run").click(function () {
                marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
                marker.hide();
                lushu.start();
                // map.clearOverlays();    //清除所有覆盖物
            });
            $("#stop").click(function () {
                lushu.stop();
                map.clearOverlays();
            });
            $("#pause").click(function () {
                lushu.pause();
            });
            $("#hide").click(function () {
                lushu.hideInfoWindow();
            });
            $("#show").click(function () {
                lushu.showInfoWindow();
            });
            //function $(element) {
            //    return document.getElementById(element);
            //}



        }

 

截图：