高德地圖軌跡回放婆赠，消息框內(nèi)展示車輛速度且隨車輛移動(dòng)-升級(jí)支持調(diào)整速度、回放進(jìn)度

使用高德地圖回放車輛GPS軌跡佳励，并添加速度和回放進(jìn)度條休里，并支持調(diào)整，效果如下：

示例.gif

新增的功能：

在基礎(chǔ)版本赃承，有如下升級(jí)

速度條：可以拖動(dòng)以調(diào)整車輛回放速度妙黍，且從當(dāng)前位置繼續(xù)回放
進(jìn)度條：進(jìn)度條表示車輛已回放的百分比，且拖動(dòng)進(jìn)度條車輛定位到相應(yīng)的位置并繼續(xù)回放

思路分析

高德和marker回放相關(guān)的API

//主要靠他回放
moveAlong(path:Array,speed:Number,f:Function,circlable:Boolean)
//點(diǎn)移動(dòng)到另一個(gè)位置瞧剖，移動(dòng)進(jìn)度條車輛跟隨移動(dòng)
moveTo(lnglat:[LngLat],speed:Number, f:Function)
//停止播放
stopMove()
//繼續(xù)播放 未用到
resumeMove()

未發(fā)現(xiàn)可以從指定點(diǎn)開(kāi)始播放的API拭嫁，所以只能迂回下了

假設(shè)我們得知從第100個(gè)點(diǎn)，開(kāi)始回放抓于；可以停止當(dāng)前回放做粤，并且從截取100到最后的軌跡點(diǎn)，生成一個(gè)臨時(shí)軌跡捉撮，讓marker來(lái)moveAlong
所以在我們拖動(dòng)速度條后怕品，需要知道當(dāng)前回放到哪個(gè)點(diǎn)
所以在我們拖動(dòng)進(jìn)度條后，需要知道當(dāng)前回放到哪個(gè)點(diǎn)
進(jìn)度條隨車輛回放變化巾遭，需要知道當(dāng)期回放到哪個(gè)點(diǎn)肉康，再除以軌跡點(diǎn)總個(gè)數(shù)以設(shè)置回放百分比

所以關(guān)鍵是獲取當(dāng)前回放到哪個(gè)點(diǎn)闯估，如下即可解決該問(wèn)題

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

關(guān)于進(jìn)度條本文用的是 ion.rangeSlider，示例和用法大家可以參考官網(wǎng)吼和，很簡(jiǎn)單
主要用到如下事件涨薪，我寫了中文備注，大家也可以參考官網(wǎng)的示例




    $("#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-用鼠標(biāo)拖動(dòng)進(jìn)度條時(shí)觸發(fā)
        },
        onFinish: function (data) {
            // fired on pointer release-用鼠標(biāo)拖動(dòng)進(jìn)度條后炫乓，釋放鼠標(biāo)觸發(fā)
        },
        onUpdate: function (data) {
            // fired on changing slider with Update method-用JS方法更新進(jìn)度條值后觸發(fā)
        }
    });

那么實(shí)現(xiàn)思路就很清晰了

車輛移動(dòng)刚夺，進(jìn)度條跟隨變化：當(dāng)前車輛已回放點(diǎn)的個(gè)數(shù)?軌跡點(diǎn)總個(gè)數(shù) （代碼137行）
修改速度，車輛從當(dāng)前位置按新速度回放: 當(dāng)前車輛停止回放末捣，從當(dāng)期位置到最后重新生成一段線路光督，車輛根據(jù)新軌跡回放
修改進(jìn)度，車輛定位到相應(yīng)位置：根據(jù)進(jìn)度條的百分比??軌跡總個(gè)數(shù)塔粒，即可定位到當(dāng)前百分比對(duì)應(yīng)的軌跡點(diǎn)，將車輛移動(dòng)到該位置即可（onUpdate事件）
修改進(jìn)度后筐摘，車輛從當(dāng)前位置回放：根據(jù)進(jìn)度條的百分比??軌跡總個(gè)數(shù)卒茬，得到當(dāng)前位置，生成從當(dāng)前位置到最后的路徑咖熟，并回放即可（onFinish事件）

源碼如下

<html>
<head>
    <head>
        <!--bootstrap css-->
        <link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!--rangeSlider css 進(jìn)度條-->
        <link rel="stylesheet" />

        <!--jquery js-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <!--bootstrap js-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <!--Amap js 高德-->
        <script src="https://webapi.amap.com/maps?v=1.3&key=fadee97bdcbf2dde564994f5deef0b58&plugin=AMap.Autocomplete,AMap.Walking,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Transfer,AMap.Driving,AMap.CitySearch,AMap.Heatmap,AMap.Size" type="text/javascript"></script>
        <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <!--rangeSlider js 進(jìn)度條-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

    </head>

<body class="container">

<div class="row">
    <div class="col-md-12">
        <!--速度條-->
        <div id="ionrange_speed"></div>
    </div>
    <div class="col-md-12">
        <!--進(jìn)度條-->
        <div id="ionrange_process"></div>
    </div>
    <div class="col-md-12">
        <button type="button" class="btn btn-info pull-right" onclick="carMarker.stopMove()">暫停</button>
        <button type="button" class="btn btn-info pull-right" onclick="playCar()">播放</button>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <!--地圖-->
        <div id="mapContainer" style="height: 100%;width: 100%;">
        </div>
    </div>
</div>

</body>


<script type="text/javascript">
    var carSpeed = 5000;//移動(dòng)速度圃酵，后面調(diào)整速度已這個(gè)為基準(zhǔn)
    var carMarker; //回放車輛
    var VEHICLE_PLAY_PROCESS = 0; //車輛當(dāng)前回放到的百分比進(jìn)度
    var VEHICLE_PATH_REPLAY_START = 0;//當(dāng)前回放的起點(diǎn)索引, 改變速度和改變進(jìn)度條的時(shí)候，根據(jù)進(jìn)度條百分比重新計(jì)算該數(shù)值馍管，并從該位置開(kāi)始再次回放

    // 車輛軌跡郭赐、速度數(shù)據(jù)
    var routeInfo = [{"lng":123.390381,"lat":41.929537,"speed":0},{"lng":123.390315,"lat":41.929736,"speed":13},{"lng":123.390331,"lat":41.930286,"speed":19},{"lng":123.390365,"lat":41.930819,"speed":25},{"lng":123.390381,"lat":41.931436,"speed":25},{"lng":123.390398,"lat":41.932069,"speed":24},{"lng":123.390416,"lat":41.932686,"speed":24},{"lng":123.390482,"lat":41.933203,"speed":20},{"lng":123.390582,"lat":41.933269,"speed":19},{"lng":123.390716,"lat":41.933287,"speed":19},{"lng":123.391433,"lat":41.933337,"speed":24},{"lng":123.392268,"lat":41.933305,"speed":26},{"lng":123.392402,"lat":41.933238,"speed":26},{"lng":123.392652,"lat":41.933071,"speed":24},{"lng":123.392819,"lat":41.932788,"speed":26},{"lng":123.393085,"lat":41.932205,"speed":30},{"lng":123.393536,"lat":41.931422,"speed":35},{"lng":123.393803,"lat":41.930956,"speed":39},{"lng":123.39407,"lat":41.930472,"speed":39},{"lng":123.394287,"lat":41.930006,"speed":41},{"lng":123.394504,"lat":41.929506,"speed":43},{"lng":123.394704,"lat":41.928972,"speed":44},{"lng":123.394921,"lat":41.928423,"speed":46},{"lng":123.395137,"lat":41.927857,"speed":46},{"lng":123.395354,"lat":41.92729,"speed":48},{"lng":123.395588,"lat":41.926707,"speed":46},{"lng":123.395822,"lat":41.926123,"speed":49},{"lng":123.396055,"lat":41.92554,"speed":47},{"lng":123.396338,"lat":41.924991,"speed":44},{"lng":123.396639,"lat":41.924508,"speed":41},{"lng":123.396939,"lat":41.924091,"speed":35},{"lng":123.397506,"lat":41.923391,"speed":28},{"lng":123.397974,"lat":41.922825,"speed":22},{"lng":123.398407,"lat":41.922375,"speed":13},{"lng":123.398841,"lat":41.921942,"speed":15},{"lng":123.399241,"lat":41.921525,"speed":24},{"lng":123.399791,"lat":41.920975,"speed":31},{"lng":123.400159,"lat":41.92061,"speed":35},{"lng":123.400876,"lat":41.919876,"speed":37},{"lng":123.401277,"lat":41.91946,"speed":41},{"lng":123.401693,"lat":41.919026,"speed":41},{"lng":123.40211,"lat":41.918576,"speed":43},{"lng":123.402527,"lat":41.918127,"speed":41},{"lng":123.402911,"lat":41.917727,"speed":37},{"lng":123.403361,"lat":41.917077,"speed":30},{"lng":123.403378,"lat":41.916877,"speed":23},{"lng":123.403261,"lat":41.916811,"speed":23},{"lng":123.402994,"lat":41.916761,"speed":26},{"lng":123.402043,"lat":41.916676,"speed":37},{"lng":123.401342,"lat":41.916643,"speed":41},{"lng":123.400659,"lat":41.91661,"speed":37},{"lng":123.400041,"lat":41.916593,"speed":33},{"lng":123.39899,"lat":41.916542,"speed":28},{"lng":123.398123,"lat":41.916509,"speed":22},{"lng":123.397839,"lat":41.916475,"speed":14},{"lng":123.397806,"lat":41.916325,"speed":15},{"lng":123.397939,"lat":41.915509,"speed":26},{"lng":123.397973,"lat":41.914675,"speed":31},{"lng":123.398073,"lat":41.913825,"speed":33},{"lng":123.398123,"lat":41.913375,"speed":35},{"lng":123.398173,"lat":41.912892,"speed":39},{"lng":123.398206,"lat":41.912425,"speed":34},{"lng":123.398289,"lat":41.911592,"speed":38},{"lng":123.398356,"lat":41.911075,"speed":43},{"lng":123.398389,"lat":41.910526,"speed":41},{"lng":123.398439,"lat":41.91001,"speed":37},{"lng":123.398488,"lat":41.909543,"speed":35},{"lng":123.398538,"lat":41.90876,"speed":28},{"lng":123.398555,"lat":41.90806,"speed":31},{"lng":123.398555,"lat":41.907143,"speed":41},{"lng":123.398572,"lat":41.90666,"speed":39},{"lng":123.398555,"lat":41.905793,"speed":31},{"lng":123.398555,"lat":41.905226,"speed":13},{"lng":123.398555,"lat":41.904743,"speed":22},{"lng":123.398572,"lat":41.904093,"speed":30},{"lng":123.398572,"lat":41.90326,"speed":33},{"lng":123.398588,"lat":41.90251,"speed":26},{"lng":123.398554,"lat":41.901893,"speed":22},{"lng":123.398504,"lat":41.90171,"speed":16},{"lng":123.398421,"lat":41.90166,"speed":16},{"lng":123.398121,"lat":41.90171,"speed":15},{"lng":123.397403,"lat":41.901793,"speed":26},{"lng":123.396285,"lat":41.901875,"speed":35},{"lng":123.395668,"lat":41.901892,"speed":37},{"lng":123.394983,"lat":41.901941,"speed":41},{"lng":123.394232,"lat":41.901991,"speed":44},{"lng":123.393516,"lat":41.902023,"speed":41},{"lng":123.392831,"lat":41.902073,"speed":39},{"lng":123.392197,"lat":41.902072,"speed":35},{"lng":123.391062,"lat":41.902072,"speed":31},{"lng":123.390094,"lat":41.902071,"speed":26},{"lng":123.38941,"lat":41.902087,"speed":17},{"lng":123.388675,"lat":41.90207,"speed":26},{"lng":123.387857,"lat":41.902069,"speed":20},{"lng":123.387189,"lat":41.902036,"speed":17},{"lng":123.386471,"lat":41.902002,"speed":18},{"lng":123.386371,"lat":41.901935,"speed":22},{"lng":123.386338,"lat":41.901818,"speed":20},{"lng":123.386371,"lat":41.901652,"speed":20},{"lng":123.386671,"lat":41.901185,"speed":0},{"lng":123.386939,"lat":41.900785,"speed":22},{"lng":123.387389,"lat":41.900169,"speed":33},{"lng":123.387657,"lat":41.899736,"speed":39},{"lng":123.38794,"lat":41.899286,"speed":39},{"lng":123.388257,"lat":41.898787,"speed":44},{"lng":123.388591,"lat":41.898254,"speed":44},{"lng":123.388924,"lat":41.897754,"speed":43},{"lng":123.389209,"lat":41.897287,"speed":39},{"lng":123.389442,"lat":41.896855,"speed":37},{"lng":123.38991,"lat":41.896055,"speed":32},{"lng":123.390193,"lat":41.895605,"speed":7},{"lng":123.390376,"lat":41.895355,"speed":13},{"lng":123.390694,"lat":41.894889,"speed":24},{"lng":123.391161,"lat":41.894172,"speed":31},{"lng":123.391595,"lat":41.893489,"speed":26},{"lng":123.391978,"lat":41.892957,"speed":15},{"lng":123.392346,"lat":41.89254,"speed":26},{"lng":123.392863,"lat":41.891907,"speed":37},{"lng":123.393214,"lat":41.891458,"speed":41},{"lng":123.393597,"lat":41.890958,"speed":50},{"lng":123.394081,"lat":41.890358,"speed":59},{"lng":123.394648,"lat":41.889709,"speed":63},{"lng":123.395182,"lat":41.889042,"speed":59},{"lng":123.395616,"lat":41.888425,"speed":55},{"lng":123.396033,"lat":41.887909,"speed":44},{"lng":123.3964,"lat":41.887476,"speed":35},{"lng":123.396884,"lat":41.886826,"speed":28},{"lng":123.397051,"lat":41.886593,"speed":24},{"lng":123.397284,"lat":41.88651,"speed":10},{"lng":123.398119,"lat":41.886594,"speed":11},{"lng":123.39877,"lat":41.886677,"speed":26},{"lng":123.399821,"lat":41.886727,"speed":35},{"lng":123.400437,"lat":41.886744,"speed":37},{"lng":123.401105,"lat":41.886778,"speed":42},{"lng":123.401788,"lat":41.886795,"speed":41},{"lng":123.402423,"lat":41.886828,"speed":36},{"lng":123.403457,"lat":41.886878,"speed":30},{"lng":123.404507,"lat":41.886929,"speed":30},{"lng":123.404925,"lat":41.886929,"speed":21},{"lng":123.404975,"lat":41.886896,"speed":21},{"lng":123.405041,"lat":41.886813,"speed":19},{"lng":123.405108,"lat":41.886446,"speed":24},{"lng":123.405208,"lat":41.885679,"speed":35},{"lng":123.405308,"lat":41.884813,"speed":30},{"lng":123.405391,"lat":41.884079,"speed":30},{"lng":123.405491,"lat":41.883213,"speed":33},{"lng":123.405591,"lat":41.882479,"speed":17},{"lng":123.405658,"lat":41.881863,"speed":27},{"lng":123.405674,"lat":41.881096,"speed":33},{"lng":123.40569,"lat":41.880629,"speed":39},{"lng":123.405724,"lat":41.880113,"speed":37},{"lng":123.405757,"lat":41.879613,"speed":41},{"lng":123.40579,"lat":41.879046,"speed":44},{"lng":123.405824,"lat":41.878479,"speed":44},{"lng":123.405857,"lat":41.877929,"speed":43},{"lng":123.405874,"lat":41.877429,"speed":39},{"lng":123.405924,"lat":41.876746,"speed":19},{"lng":123.405957,"lat":41.876279,"speed":11},{"lng":123.406024,"lat":41.875729,"speed":24},{"lng":123.406107,"lat":41.874946,"speed":35},{"lng":123.406157,"lat":41.874463,"speed":37},{"lng":123.40619,"lat":41.874013,"speed":37},{"lng":123.40624,"lat":41.873496,"speed":43},{"lng":123.40629,"lat":41.872929,"speed":50},{"lng":123.406357,"lat":41.872329,"speed":45},{"lng":123.40639,"lat":41.871796,"speed":39},{"lng":123.406439,"lat":41.871296,"speed":37},{"lng":123.406489,"lat":41.870829,"speed":35},{"lng":123.406506,"lat":41.870046,"speed":30},{"lng":123.406573,"lat":41.869346,"speed":24},{"lng":123.406656,"lat":41.869046,"speed":24},{"lng":123.406756,"lat":41.868979,"speed":20},{"lng":123.406873,"lat":41.868946,"speed":20},{"lng":123.407274,"lat":41.868997,"speed":9},{"lng":123.408307,"lat":41.869097,"speed":28},{"lng":123.409425,"lat":41.869164,"speed":37},{"lng":123.410591,"lat":41.869163,"speed":30},{"lng":123.411008,"lat":41.869146,"speed":20},{"lng":123.411058,"lat":41.869096,"speed":20},{"lng":123.411125,"lat":41.869013,"speed":20},{"lng":123.411158,"lat":41.868646,"speed":27},{"lng":123.411191,"lat":41.867913,"speed":35},{"lng":123.411225,"lat":41.867446,"speed":37},{"lng":123.411275,"lat":41.866979,"speed":35},{"lng":123.411375,"lat":41.866229,"speed":26},{"lng":123.411425,"lat":41.86558,"speed":19},{"lng":123.411441,"lat":41.865064,"speed":24},{"lng":123.411508,"lat":41.864464,"speed":19},{"lng":123.411541,"lat":41.863897,"speed":10},{"lng":123.411591,"lat":41.863764,"speed":15},{"lng":123.411841,"lat":41.863729,"speed":13},{"lng":123.412458,"lat":41.863796,"speed":26},{"lng":123.413425,"lat":41.863846,"speed":30},{"lng":123.414558,"lat":41.863896,"speed":31},{"lng":123.415725,"lat":41.863979,"speed":33},{"lng":123.416725,"lat":41.864012,"speed":28},{"lng":123.417291,"lat":41.863978,"speed":15},{"lng":123.417375,"lat":41.863878,"speed":15},{"lng":123.417425,"lat":41.863628,"speed":24},{"lng":123.417475,"lat":41.862895,"speed":33},{"lng":123.417541,"lat":41.862428,"speed":37},{"lng":123.417591,"lat":41.861928,"speed":43},{"lng":123.417625,"lat":41.861362,"speed":43},{"lng":123.417641,"lat":41.860878,"speed":35},{"lng":123.417641,"lat":41.859978,"speed":39},{"lng":123.41769,"lat":41.859478,"speed":40},{"lng":123.417824,"lat":41.858795,"speed":23},{"lng":123.417957,"lat":41.858728,"speed":22},{"lng":123.418124,"lat":41.858712,"speed":24},{"lng":123.418224,"lat":41.858745,"speed":26},{"lng":123.418324,"lat":41.858778,"speed":26},{"lng":123.418457,"lat":41.858895,"speed":28},{"lng":123.419157,"lat":41.859544,"speed":41},{"lng":123.41934,"lat":41.859861,"speed":44},{"lng":123.419507,"lat":41.860327,"speed":46},{"lng":123.419724,"lat":41.860861,"speed":41},{"lng":123.41989,"lat":41.861027,"speed":41},{"lng":123.420207,"lat":41.861227,"speed":43},{"lng":123.420574,"lat":41.861394,"speed":43},{"lng":123.421157,"lat":41.861543,"speed":46},{"lng":123.42194,"lat":41.86166,"speed":49},{"lng":123.422773,"lat":41.861792,"speed":52},{"lng":123.423656,"lat":41.861909,"speed":50},{"lng":123.424489,"lat":41.862041,"speed":49},{"lng":123.425288,"lat":41.862174,"speed":46},{"lng":123.426072,"lat":41.86229,"speed":46},{"lng":123.426804,"lat":41.862422,"speed":43},{"lng":123.427504,"lat":41.862522,"speed":41},{"lng":123.42817,"lat":41.862638,"speed":43},{"lng":123.428886,"lat":41.862755,"speed":45},{"lng":123.429669,"lat":41.862887,"speed":48},{"lng":123.430468,"lat":41.863003,"speed":48},{"lng":123.431301,"lat":41.863135,"speed":50},{"lng":123.432133,"lat":41.863235,"speed":48},{"lng":123.432632,"lat":41.863217,"speed":48},{"lng":123.433099,"lat":41.8631,"speed":48},{"lng":123.433531,"lat":41.8629,"speed":51},{"lng":123.433898,"lat":41.862633,"speed":52},{"lng":123.434181,"lat":41.862282,"speed":54},{"lng":123.43443,"lat":41.861765,"speed":56},{"lng":123.434714,"lat":41.861049,"speed":61},{"lng":123.435029,"lat":41.860248,"speed":69},{"lng":123.435363,"lat":41.859364,"speed":72},{"lng":123.435695,"lat":41.858514,"speed":70},{"lng":123.436028,"lat":41.85768,"speed":67},{"lng":123.436311,"lat":41.856863,"speed":65},{"lng":123.436544,"lat":41.856063,"speed":63},{"lng":123.436744,"lat":41.855296,"speed":61},{"lng":123.436943,"lat":41.854546,"speed":59},{"lng":123.437126,"lat":41.853829,"speed":57},{"lng":123.43731,"lat":41.853129,"speed":56},{"lng":123.437525,"lat":41.852445,"speed":54},{"lng":123.437759,"lat":41.852078,"speed":52},{"lng":123.438208,"lat":41.851678,"speed":51},{"lng":123.438624,"lat":41.85146,"speed":50},{"lng":123.439073,"lat":41.851293,"speed":48},{"lng":123.439539,"lat":41.851226,"speed":49},{"lng":123.440205,"lat":41.851208,"speed":46},{"lng":123.440837,"lat":41.851257,"speed":46},{"lng":123.441686,"lat":41.851306,"speed":52},{"lng":123.442617,"lat":41.851354,"speed":57},{"lng":123.443633,"lat":41.851403,"speed":63},{"lng":123.444748,"lat":41.851468,"speed":67},{"lng":123.445846,"lat":41.851516,"speed":63},{"lng":123.446877,"lat":41.851565,"speed":59},{"lng":123.447825,"lat":41.851596,"speed":56},{"lng":123.448724,"lat":41.851644,"speed":52},{"lng":123.449572,"lat":41.851677,"speed":52},{"lng":123.450503,"lat":41.851725,"speed":56},{"lng":123.451501,"lat":41.851756,"speed":61},{"lng":123.452566,"lat":41.851821,"speed":67},{"lng":123.453713,"lat":41.851869,"speed":70},{"lng":123.45491,"lat":41.851933,"speed":70},{"lng":123.456058,"lat":41.851981,"speed":65},{"lng":123.457122,"lat":41.852028,"speed":61},{"lng":123.458136,"lat":41.852093,"speed":57},{"lng":123.459083,"lat":41.852158,"speed":56},{"lng":123.459965,"lat":41.852172,"speed":50},{"lng":123.460963,"lat":41.85222,"speed":48},{"lng":123.461594,"lat":41.852253,"speed":44},{"lng":123.462342,"lat":41.852284,"speed":46},{"lng":123.463372,"lat":41.852332,"speed":57},{"lng":123.464354,"lat":41.85238,"speed":59},{"lng":123.465334,"lat":41.85241,"speed":57},{"lng":123.466281,"lat":41.852442,"speed":57},{"lng":123.467212,"lat":41.852423,"speed":54},{"lng":123.468109,"lat":41.852288,"speed":57},{"lng":123.469023,"lat":41.852085,"speed":57},{"lng":123.469921,"lat":41.851816,"speed":57},{"lng":123.470785,"lat":41.851564,"speed":54},{"lng":123.471615,"lat":41.851312,"speed":50},{"lng":123.472363,"lat":41.851077,"speed":48},{"lng":123.473111,"lat":41.850875,"speed":44},{"lng":123.473776,"lat":41.85064,"speed":41},{"lng":123.474424,"lat":41.850422,"speed":46},{"lng":123.475088,"lat":41.850203,"speed":44},{"lng":123.475752,"lat":41.850018,"speed":38},{"lng":123.476633,"lat":41.849782,"speed":30},{"lng":123.477846,"lat":41.849429,"speed":44},{"lng":123.478543,"lat":41.849227,"speed":43},{"lng":123.479191,"lat":41.849025,"speed":39},{"lng":123.479806,"lat":41.848858,"speed":37},{"lng":123.480387,"lat":41.848689,"speed":36},{"lng":123.481434,"lat":41.848419,"speed":30},{"lng":123.482098,"lat":41.848251,"speed":6},{"lng":123.482896,"lat":41.848065,"speed":28},{"lng":123.483908,"lat":41.847762,"speed":37},{"lng":123.484556,"lat":41.847544,"speed":44},{"lng":123.485237,"lat":41.847292,"speed":43},{"lng":123.485901,"lat":41.847091,"speed":41},{"lng":123.486566,"lat":41.846905,"speed":39},{"lng":123.487164,"lat":41.84672,"speed":35},{"lng":123.488093,"lat":41.846384,"speed":19},{"lng":123.488127,"lat":41.846284,"speed":18},{"lng":123.48811,"lat":41.846234,"speed":20},{"lng":123.487844,"lat":41.845801,"speed":25},{"lng":123.487612,"lat":41.845202,"speed":22},{"lng":123.487346,"lat":41.844553,"speed":24},{"lng":123.487031,"lat":41.844053,"speed":24},{"lng":123.486847,"lat":41.843671,"speed":23},{"lng":123.486881,"lat":41.843204,"speed":22},{"lng":123.486582,"lat":41.842739,"speed":22},{"lng":123.486283,"lat":41.84219,"speed":22},{"lng":123.486,"lat":41.841756,"speed":23},{"lng":123.485851,"lat":41.841724,"speed":22},{"lng":123.485635,"lat":41.841757,"speed":20},{"lng":123.485003,"lat":41.841943,"speed":24},{"lng":123.484323,"lat":41.842178,"speed":22},{"lng":123.484256,"lat":41.842261,"speed":22},{"lng":123.48424,"lat":41.842378,"speed":22},{"lng":123.484323,"lat":41.842545,"speed":23},{"lng":123.484639,"lat":41.843044,"speed":22},{"lng":123.484804,"lat":41.843627,"speed":20},{"lng":123.485004,"lat":41.843859,"speed":7},{"lng":123.484938,"lat":41.843959,"speed":17},{"lng":123.484323,"lat":41.844245,"speed":24},{"lng":123.483509,"lat":41.84448,"speed":20},{"lng":123.482811,"lat":41.844649,"speed":20},{"lng":123.482197,"lat":41.844867,"speed":15},{"lng":123.481865,"lat":41.844968,"speed":8},{"lng":123.481615,"lat":41.845103,"speed":13},{"lng":123.481134,"lat":41.845254,"speed":8},{"lng":123.480918,"lat":41.845155,"speed":14},{"lng":123.480885,"lat":41.844988,"speed":19},{"lng":123.480653,"lat":41.844388,"speed":28},{"lng":123.480237,"lat":41.843656,"speed":28},{"lng":123.479921,"lat":41.843073,"speed":28},{"lng":123.479506,"lat":41.842224,"speed":35},{"lng":123.47909,"lat":41.84141,"speed":30},{"lng":123.478758,"lat":41.84096,"speed":11},{"lng":123.478409,"lat":41.840394,"speed":22},{"lng":123.478176,"lat":41.839912,"speed":17},{"lng":123.477894,"lat":41.839213,"speed":17},{"lng":123.477727,"lat":41.838696,"speed":9},{"lng":123.477395,"lat":41.838264,"speed":11},{"lng":123.477279,"lat":41.838047,"speed":10},{"lng":123.477063,"lat":41.837465,"speed":25},{"lng":123.476747,"lat":41.836816,"speed":29},{"lng":123.476415,"lat":41.836183,"speed":25},{"lng":123.476132,"lat":41.835617,"speed":15},{"lng":123.476099,"lat":41.835434,"speed":20},{"lng":123.476132,"lat":41.83535,"speed":20},{"lng":123.476199,"lat":41.835267,"speed":20},{"lng":123.476316,"lat":41.835217,"speed":20},{"lng":123.478026,"lat":41.834778,"speed":33},{"lng":123.479007,"lat":41.834526,"speed":28},{"lng":123.479787,"lat":41.834208,"speed":24},{"lng":123.480684,"lat":41.834005,"speed":30},{"lng":123.481481,"lat":41.833753,"speed":22},{"lng":123.482262,"lat":41.833551,"speed":26},{"lng":123.483043,"lat":41.833332,"speed":22},{"lng":123.483707,"lat":41.833063,"speed":24},{"lng":123.484289,"lat":41.832678,"speed":26},{"lng":123.484936,"lat":41.832159,"speed":33},{"lng":123.485866,"lat":41.831491,"speed":39},{"lng":123.486297,"lat":41.831123,"speed":37},{"lng":123.486596,"lat":41.830755,"speed":35},{"lng":123.487062,"lat":41.830037,"speed":17},{"lng":123.487377,"lat":41.829586,"speed":20},{"lng":123.487826,"lat":41.828901,"speed":35},{"lng":123.488125,"lat":41.828484,"speed":39},{"lng":123.488439,"lat":41.827999,"speed":43},{"lng":123.488772,"lat":41.827515,"speed":43},{"lng":123.489054,"lat":41.827048,"speed":39},{"lng":123.489336,"lat":41.826614,"speed":37},{"lng":123.489602,"lat":41.826196,"speed":35},{"lng":123.489868,"lat":41.825795,"speed":37},{"lng":123.490167,"lat":41.825378,"speed":36},{"lng":123.490615,"lat":41.824627,"speed":30},{"lng":123.49103,"lat":41.824042,"speed":26},{"lng":123.491445,"lat":41.823341,"speed":26},{"lng":123.491861,"lat":41.822823,"speed":20},{"lng":123.492209,"lat":41.822238,"speed":31},{"lng":123.492458,"lat":41.821872,"speed":10},{"lng":123.492474,"lat":41.822088,"speed":13},{"lng":123.492026,"lat":41.822689,"speed":24},{"lng":123.491595,"lat":41.823224,"speed":20},{"lng":123.491428,"lat":41.823508,"speed":0},{"lng":123.491428,"lat":41.823508,"speed":0},{"lng":123.491213,"lat":41.823658,"speed":11},{"lng":123.491179,"lat":41.823975,"speed":6},{"lng":123.490748,"lat":41.824477,"speed":11},{"lng":123.490581,"lat":41.824877,"speed":24},{"lng":123.49015,"lat":41.825544,"speed":35},{"lng":123.489652,"lat":41.826313,"speed":31},{"lng":123.489453,"lat":41.82668,"speed":17},{"lng":123.489702,"lat":41.826746,"speed":9},{"lng":123.490117,"lat":41.826879,"speed":9},{"lng":123.490051,"lat":41.826912,"speed":0},{"lng":123.490183,"lat":41.826711,"speed":0},{"lng":123.490083,"lat":41.826662,"speed":0},{"lng":123.489918,"lat":41.826929,"speed":0},{"lng":123.489951,"lat":41.826962,"speed":0},{"lng":123.489834,"lat":41.827012,"speed":4},{"lng":123.489702,"lat":41.826846,"speed":8},{"lng":123.48942,"lat":41.826631,"speed":7},{"lng":123.489253,"lat":41.826714,"speed":13},{"lng":123.488805,"lat":41.827382,"speed":28},{"lng":123.488307,"lat":41.82815,"speed":31},{"lng":123.487908,"lat":41.828885,"speed":26},{"lng":123.487577,"lat":41.829352,"speed":7},{"lng":123.487144,"lat":41.830053,"speed":26},{"lng":123.486663,"lat":41.830771,"speed":37},{"lng":123.486297,"lat":41.831156,"speed":37},{"lng":123.485866,"lat":41.831541,"speed":41},{"lng":123.485418,"lat":41.831892,"speed":35},{"lng":123.48482,"lat":41.832377,"speed":7},{"lng":123.484239,"lat":41.832795,"speed":17},{"lng":123.483507,"lat":41.833163,"speed":31},{"lng":123.482511,"lat":41.8335,"speed":35},{"lng":123.481913,"lat":41.833668,"speed":39},{"lng":123.481315,"lat":41.833836,"speed":37},{"lng":123.480552,"lat":41.834056,"speed":7},{"lng":123.479837,"lat":41.834258,"speed":26},{"lng":123.47884,"lat":41.83456,"speed":39},{"lng":123.478143,"lat":41.834745,"speed":43},{"lng":123.477512,"lat":41.83493,"speed":37},{"lng":123.476946,"lat":41.835115,"speed":35},{"lng":123.476166,"lat":41.83545,"speed":17},{"lng":123.476116,"lat":41.835534,"speed":17},{"lng":123.476149,"lat":41.835633,"speed":17},{"lng":123.476431,"lat":41.836133,"speed":30},{"lng":123.47688,"lat":41.837015,"speed":37},{"lng":123.477146,"lat":41.837498,"speed":39},{"lng":123.477329,"lat":41.83798,"speed":26},{"lng":123.477528,"lat":41.838497,"speed":24},{"lng":123.477794,"lat":41.838979,"speed":22},{"lng":123.478044,"lat":41.839478,"speed":17},{"lng":123.47831,"lat":41.839995,"speed":13},{"lng":123.478592,"lat":41.840577,"speed":15},{"lng":123.478725,"lat":41.840777,"speed":15},{"lng":123.479057,"lat":41.841026,"speed":17},{"lng":123.479123,"lat":41.841292,"speed":27},{"lng":123.479389,"lat":41.841909,"speed":34},{"lng":123.479622,"lat":41.842358,"speed":39},{"lng":123.479871,"lat":41.84279,"speed":41},{"lng":123.48012,"lat":41.843307,"speed":43},{"lng":123.480386,"lat":41.843789,"speed":39},{"lng":123.480619,"lat":41.844238,"speed":35},{"lng":123.481017,"lat":41.845004,"speed":30},{"lng":123.48145,"lat":41.845753,"speed":34},{"lng":123.481616,"lat":41.846119,"speed":26},{"lng":123.481583,"lat":41.846219,"speed":20},{"lng":123.481301,"lat":41.846286,"speed":9},{"lng":123.480902,"lat":41.846421,"speed":15},{"lng":123.480802,"lat":41.846488,"speed":17},{"lng":123.480769,"lat":41.846571,"speed":17},{"lng":123.480802,"lat":41.846771,"speed":13},{"lng":123.481002,"lat":41.84682,"speed":7},{"lng":123.481052,"lat":41.846754,"speed":0}];

    // 初始化速度條
    var speedSlider = $("#ionrange_speed").ionRangeSlider({
        min: 1,
        max: 10,
        step: 0.5,
        from: 5,
        postfix: "倍",
        prettify: false,
        hasGrid: true,
        onFinish: function (data) {
            if (carMarker) {
                carMarker.stopMove();
            }
            // 拖動(dòng)速度條，放下后觸發(fā)： 設(shè)定車輛速度為當(dāng)前指定的速度
            carSpeed = data.from * 1000;
            VEHICLE_PATH_REPLAY_START = Math.round(routeInfo.length * VEHICLE_PLAY_PROCESS / 100);
            playCar();
        },
    });

    // 初始化進(jìn)度條
    var speedSlider = $("#ionrange_process").ionRangeSlider({
        min: 0,
        max: 100,
        step: 1,
        from: 0,
        postfix: "%",
        prettify: false,
        hasGrid: true,
        onUpdate: function (data) {
            //車輛移動(dòng)的時(shí)候确沸，使用JS方法更新進(jìn)度條捌锭，觸發(fā)該方法： 記錄車輛回放的進(jìn)度
            VEHICLE_PLAY_PROCESS = data.from;
        },
        onChange: function (data) {
            //手動(dòng)拖動(dòng)進(jìn)度條過(guò)程中觸發(fā)：移動(dòng)車輛，定位車輛回放位置
            var currentIndex = Math.round(routeInfo.length * data.from / 100);
            var vehicleLocation = routeInfo[currentIndex];
            carMarker.setPosition(new AMap.LngLat(vehicleLocation.lng, vehicleLocation.lat));
        },
        onFinish: function (data) {
            //拖動(dòng)進(jìn)度條罗捎，確定釋放后觸發(fā)观谦，從當(dāng)前位置開(kāi)始回放
            VEHICLE_PLAY_PROCESS = data.from;
            VEHICLE_PATH_REPLAY_START = Math.round(routeInfo.length * VEHICLE_PLAY_PROCESS / 100);
            playCar();
        }
    });

    // 創(chuàng)建地圖
    var map = new AMap.Map("mapContainer", {
        view: new AMap.View2D({}),
        lang: "zh_cn"
    });

    // 創(chuàng)建小汽車marker
    var carMarker = new AMap.Marker({
        map: map,
        position: [routeInfo[0].lng, routeInfo[0].lat],
        icon: "http://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true
    });

    // 創(chuàng)建跟速度信息展示框
    var carWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(6, -25),
        content: ""
    });

    // 生成路線
    initializePaths(routeInfo);

    //添加監(jiān)聽(tīng)事件： 車輛移動(dòng)的時(shí)候，更新速度窗體位置桨菜，記錄當(dāng)前回放百分比
    AMap.event.addListener(carMarker, 'moving', function (e) {
        var lastLocation = e.passedPath[e.passedPath.length - 1];
        //移動(dòng)窗體
        carWindow.setPosition(lastLocation);
        //根據(jù)gps信息豁状，在源數(shù)據(jù)中查詢當(dāng)前位置速度
        setVehicleSpeedInWidowns(lastLocation);
        //更新進(jìn)度條
        $("#ionrange_process").data('ionRangeSlider').update({from: Math.round((e.passedPath.length + VEHICLE_PATH_REPLAY_START) / routeInfo.length * 100)})
    });

    // 打開(kāi)速度框
    carWindow.open(map, carMarker.getPosition());

    // 地圖自適應(yīng)縮放
    map.setFitView();

    function initializePaths(paths) {
        var line;
        var pathLngLatArray = new Array();
        if (paths) {
            for (var i = 0; i < paths.length; i++) {
                pathLngLatArray.push(new AMap.LngLat(paths[i].lng, paths[i].lat));
            }
            line = new AMap.Polyline({
                map: map,
                path: pathLngLatArray,
                strokeColor: 'red',
                strokeOpacity: 0.8,
                strokeWeight: 6,
                strokeStyle: 'solid'
            });
            line.setMap(map);
        }
        return line;
    }

    function setVehicleSpeedInWidowns(lnglat) {
        for (var i = 0; i < routeInfo.length; i++) {
            if (lnglat.distance(new AMap.LngLat(routeInfo[i].lng, routeInfo[i].lat)) < 4) {
                carWindow.setContent("速度:" + (routeInfo[i].speed * 1.852).toFixed(2) + "公里/時(shí)");
                return;
            }
        }

    }

    // 車輛開(kāi)始回放
    function playCar() {
        if (carMarker) {
            carMarker.stopMove();
        }

        //計(jì)算需要回放的GPS路徑
        var replayPath = [];
        for (var i = VEHICLE_PATH_REPLAY_START; i < routeInfo.length; i++) {
            replayPath.push(new AMap.LngLat(routeInfo[i].lng, routeInfo[i].lat));
        }
        carMarker.moveAlong(replayPath, carSpeed, function (k) {
            return k
        }, false);
    }

</script>


</html>

最后編輯于：2020.04.29 16:47:27

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市倒得，隨后出現(xiàn)的幾起案子泻红，更是在濱河造成了極大的恐慌，老刑警劉巖霞掺，帶你破解...
沈念sama閱讀 206,311評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件谊路，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡根悼，警方通過(guò)查閱死者的電腦和手機(jī)凶异，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門蜀撑，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人剩彬，你說(shuō)我怎么就攤上這事酷麦。” “怎么了喉恋？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵沃饶，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我轻黑，道長(zhǎng)糊肤，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任氓鄙，我火速辦了婚禮馆揉，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘抖拦。我一直安慰自己升酣，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,253評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布态罪。她就那樣靜靜地躺著噩茄，像睡著了一般。火紅的嫁衣襯著肌膚如雪复颈。梳的紋絲不亂的頭發(fā)上绩聘，一...
開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1贊 285
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音耗啦，去河邊找鬼凿菩。笑死，一個(gè)胖子當(dāng)著我的面吹牛芹彬，可吹牛的內(nèi)容都是我干的蓄髓。我是一名探鬼主播，決...
沈念sama閱讀 38,340評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼舒帮，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼会喝！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起玩郊，我...
開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤肢执，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后译红，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體预茄，經(jīng)...
沈念sama閱讀 43,466評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,937評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了耻陕。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拙徽。...
茶點(diǎn)故事閱讀 38,039評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖诗宣，靈堂內(nèi)的尸體忽然破棺而出膘怕，到底是詐尸還是另有隱情，我是刑警寧澤召庞，帶...
沈念sama閱讀 33,701評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布岛心，位于F島的核電站，受9級(jí)特大地震影響篮灼，放射性物質(zhì)發(fā)生泄漏忘古。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,254評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一诅诱、第九天我趴在偏房一處隱蔽的房頂上張望髓堪。院中可真熱鬧，春花似錦娘荡、人聲如沸旦袋。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0贊 19
一樁弒父案它改，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至商乎，卻和暖如春央拖，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背鹉戚。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工鲜戒，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人抹凳。一個(gè)月前我還...
沈念sama閱讀 45,497評(píng)論 2贊 354
代替公主和親
正文我出身青樓遏餐，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親赢底。傳聞我的和親對(duì)象是個(gè)殘疾皇子失都，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,786評(píng)論 2贊 345

高德地圖軌跡回放，消息框內(nèi)展示車輛速度且隨車輛移動(dòng)-升級(jí)支持調(diào)整速度唤衫、回放進(jìn)度

高德地圖軌跡回放婆赠，消息框內(nèi)展示車輛速度且隨車輛移動(dòng)-升級(jí)支持調(diào)整速度、回放進(jìn)度

新增的功能：

思路分析

推薦閱讀更多精彩內(nèi)容