<div id="ctrl">
  <button id="start">开始</button>
  <select name="type" id="type">
    <option value="1">marker.start()</option>
    <option value="2">marker.moveTo()</option>
  </select>
  <input type="checkbox" id="fixed">
  <label for="fixed">setTimeout</label>
</div>
<div id="map"></div>

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#ctrl {
  margin: 10px;
  #start {
    padding: 5px 10px;
  }
}

#map {
  width: 100%;
  flex: 1;
}

const points = [{
  lat: 23.139495, lng: 113.200912
}, {
  lat: 23.289495, lng: 113.300912
}, {
  lat: 23.289495, lng: 113.350912
}, {
  lat: 23.119495, lng: 113.350912
}, {
  lat: 23.151595, lng: 113.500912
}, {
  lat: 23.351235, lng: 113.404912
}, {
  lat: 23.171595, lng: 113.590912
}];

let type;
let curIndex = 0;
let isMoving = false;
const MOVE_TIME = 800;

const map = L.map('map', {
    center: [23.191595, 113.300912],
    zoom: 10
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const polyline = L.polyline(points, {color: 'red'}).addTo(map);

const myMovingMarker = L.Marker.movingMarker(points, 4000).addTo(map).on('end', () => {
  console.log('reach end');
  if (type === 2) {
    if (curIndex < points.length - 1) {
      console.log($('#fixed').prop('checked'));
      
      if ($('#fixed').prop('checked')) {
        setTimeout(() => {
          myMovingMarker.moveTo(points[++curIndex], MOVE_TIME); 
        }, 0);  
      } else {
        myMovingMarker.moveTo(points[++curIndex], MOVE_TIME);
      }
    }
  }
});


let $btn = $('#start');

$btn.on('click', () => {
  type = +$('#type').val();
  if (type === 1) {
    myMovingMarker.start();
  } else if (type === 2) {
    curIndex = 0;
    myMovingMarker.setLatLng(points[curIndex]);
    myMovingMarker.moveTo(points[++curIndex], MOVE_TIME);
  }
});