高德地图 轨迹巡航速度切换--单轨迹

<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=2.0&key=(高德key)&plugin=AMap.MouseTool,AMap.Geocoder">
    </script>
  <script src="//webapi.amap.com/ui/1.1/main.js"></script> //高德UI必加载

AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {

if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//just some colors
 var colors = ["#C11534"];

var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: map, //所属的地图实例
getPath: function (pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function (pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
//point 
return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
}
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
pathLineStyle: {
dirArrowStyle: true
 },
getPathStyle: function (pathItem, zoom) {

var color = colors[pathItem.pathIndex],
lineWidth = Math.round(1 * Math.pow(1.1, zoom - 3));

return {
 pathLineStyle: {
  strokeStyle: color, //轨迹初始色
  lineWidth: lineWidth  //初始线宽
  },
   pathLineSelectedStyle: {
  lineWidth: lineWidth + 2 //点击轨迹线宽+2
  },
    pathNavigatorStyle: {
  fillStyle: '#1282C4' //标记内填充色
  },
  startPointStyle: {
 radius: 0,
   lineWidth: 0
  },
  endPointStyle: {
    radius: 0,
    lineWidth: 0
                              }
                            }
                          }
                        }
                      });

 var pathNavigs = [];

 function getNavg(pathIndex) {

 if (!pathNavigs[pathIndex]) {

 //创建一个轨迹巡航器
 var navgtr = pathSimplifierIns.createPathNavigator(pathIndex, {
  loop: true, //是否循环播放 false播放完毕后停止
  speed: parseInt(5 / $('#speedInp_' + pathIndex).val())
 });

 var $markerContent = $('<div class="markerInfo"></div>');

                          $markerContent.html(pathSimplifierIns.getPathData(pathIndex).name);

 navgtr.marker = new AMap.Marker({
  offset: new AMap.Pixel(12, -10),
  content: $markerContent.get(0),
  map: map
 });

 // var $msg = $('#routes-container').find('div.route-item[data-idx="' +
 //   pathIndex + '"]').find('.msg');

 navgtr.on('move', function () {
  navgtr.marker.setPosition(navgtr.getPosition());
  });

 navgtr.onDestroy(function () {
  pathNavigs[pathIndex] = null;
  navgtr.marker.setMap(null);
  // $msg.html('');
  });

 navgtr.on('start resume', function () {
  navgtr._startTime = Date.now();
  navgtr._startDist = this.getMovedDistance();
 });

 navgtr.on('stop pause', function () {
  navgtr._movedTime = Date.now() - navgtr._startTime;
  navgtr._movedDist = this.getMovedDistance() - navgtr._startDist;
  navgtr._realSpeed = (navgtr._movedDist / navgtr._movedTime * 3600);
  refreshNavgButtons();
 });

 navgtr.on('move', (data, position) => {
  const idx = position.dataItem.pointIndex
  // console.log(idx);
  var msgInfo = allmovetime[idx]

 // $msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');
  
 });

  pathNavigs[pathIndex] = navgtr;
 }

  return pathNavigs[pathIndex];
  }
 var navigBtnsConf = [{
  name: '开始回放',
  action: 'start',
  enableExp: 'navgStatus === "stop" || navgStatus === "pause"'
 }, {
  name: '暂停',
  action: 'pause',
  enableExp: 'navgStatus === "moving"'
 }, {
  name: '继续',
  action: 'resume',
  enableExp: 'navgStatus === "pause"'
 }, {
  name: '停止',
  action: 'stop',
  enableExp: 'navgStatus === "moving"'
 }, {
  name: '清除',
  action: 'destroy',
  enableExp: 'navgExists'
 }];

 function refreshNavgButtons() {
  $('#routes-container').find('div.route-item').each(function () {
  var pathIndex = parseInt($(this).attr('data-idx'), 0);
  if (pathIndex < 0) {
   return;
   }
  var navgStatus = 'stop',
    navgExists = !!pathNavigs[pathIndex];
   if (navgExists) {
    navgStatus = pathNavigs[pathIndex].getNaviStatus();
   }
 $(this).find('.navigBtn').each(function () {
  var btnIdx = parseInt($(this).attr('data-btnIdx'));
  $(this).prop('disabled', !eval(navigBtnsConf[btnIdx].enableExp));
   });
   });
 }
 function initRoutesContainer(data) {
  $('#routes-container').on('click', '.navigBtn', function () {
  var pathIndex = parseInt($(this).closest('.route-item').attr('data-idx'), 0);
  var navg = getNavg(pathIndex);
  navg[$(this).attr('data-act')]();
  refreshNavgButtons();
  });
 initRouteItem(data[0], 0);
  refreshNavgButtons();
  }
function initRouteItem(pathData, idx) {
  var $routeItem = $('<div class="route-item"></div>');
 $routeItem.attr('data-idx', idx);
 //start btn
  for (var i = 0, len = navigBtnsConf.length; i < len; i++) {
   $('<button class="navigBtn layui-btn layui-btn-sm layui-btn-primary layui-border-blue" data-btnIdx="' + i + '" data-act="' + navigBtnsConf[i].action + '"></button>').html(navigBtnsConf[i].name).appendTo($routeItem);
 }
   $speedBox = $('<div class="speedBox"></div>').appendTo($routeItem);
   var speedTxt = $('<span><span>').appendTo($speedBox);
   var speedRangeInput = $('<input id="speedInp_' + idx +'" class="speedRange" type="range" min="1" max="10" step="1" value="1" />').appendTo($speedBox);
 function updateSpeedTxt() {
  var speed = parseInt(speedRangeInput.val(), 10);
  speedTxt.html('倍速：' + speed + ' X');
  if (pathNavigs[idx]) {
   pathNavigs[idx].setSpeed((5 * speed));
  }
   }
  speedRangeInput.on('change', updateSpeedTxt);
  updateSpeedTxt();
 $speedBox.appendTo($routeItem);
  // $('<div class="msg"></div>').appendTo($routeItem);
 $routeItem.appendTo('#routes-container');
 }
  window.pathSimplifierIns = pathSimplifierIns;
   $.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function (d) {
  // pathSimplifierIns.setData(d);
   pathSimplifierIns.setData([{
    name: 'xxx',
   path: 你的轨迹集合,
    }]);
 initRoutesContainer(d);
  });
 pathSimplifierIns.on('selectedPathIndexChanged', function (e, info) {
  });
 pathSimplifierIns.on('pointClick pointMouseover pointMouseout', function (e, record) {
  //console.log(e.type, record);
 });
 pathSimplifierIns.on('pathClick pathMouseover pathMouseout', function (e, record) {
 //console.log(e.type, record);
  });
 });