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);
}
});
View Compiled