场景
Vue+Leaflet实现加载OSM显示地图：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
在上面的基础上，怎样使用插件MovingMarker实现标记移动效果。
效果
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、插件地址
https://github.com/ewoken/Leaflet.MovingMarker
2、下载仓库代码，复制其MovingMarker.js核心文件
3、引入leaflet所需的文件以及该js文件
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script type="text/javascript" src="./js/MovingMarker.js"></script>
4、完整示例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>leaflet移动点位(轨迹回放效果)</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script type="text/javascript" src="./js/MovingMarker.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([36.09, 120.35], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ''
}).addTo(map);
var parisKievLL = [
[48.8567, 2.3508],
[50.45, 30.523333]
];
var londonParisRomeBerlinBucarest = [
[51.507222, -0.1275],
[48.8567, 2.3508],
[41.9, 12.5],
[52.516667, 13.383333],
[44.4166, 26.1]
];
var londonBrusselFrankfurtAmsterdamLondon = [
[51.507222, -0.1275],
[50.85, 4.35],
[50.116667, 8.683333],
[52.366667, 4.9],
[51.507222, -0.1275]
];
var barcelonePerpignanPauBordeauxMarseilleMonaco = [
[41.385064, 2.173403],
[42.698611, 2.895556],
[43.3017, -0.3686],
[44.837912, -0.579541],
[43.296346, 5.369889],
[43.738418, 7.424616]
];
map.fitBounds(londonParisRomeBerlinBucarest);
//点击标记开始/暂停
//========================================================================
var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);
L.polyline(parisKievLL).addTo(map);
marker1.once('click', function () {
marker1.start();
marker1.closePopup();
marker1.unbindPopup();
marker1.on('click', function () {
if (marker1.isRunning()) {
marker1.pause();
} else {
marker1.start();
}
});
setTimeout(function () {
marker1.bindPopup('<b>点我暂停 !</b>').openPopup();
}, 2000);
});
marker1.bindPopup('<b>点我开始</b> !</b>', {
closeOnClick: false
});
marker1.openPopup();
//=========================================================================
//添加一个循环走的标记
var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,
[2000, 2000, 2000, 2000], {
autostart: true,
loop: true
}).addTo(map);
marker3.loops = 0;
marker3.bindPopup('', {
closeOnClick: false
});
//=========================================================================
//设置循环loop事件，进行循环次数计数
marker3.on('loop', function (e) {
marker3.loops++;
if (e.elapsedTime < 50) {
marker3.getPopup().setContent("<b>Loop: " + marker3.loops + "</b>")
marker3.openPopup();
setTimeout(function () {
marker3.closePopup();
if (!marker1.isEnded()) {
marker1.openPopup();
} else {
if (marker4.getLatLng().equals([45.816667, 15.983333])) {
marker4.bindPopup('点击地图使我移动 !');
marker4.openPopup();
}
}
}, 2000);
}
});
//marker4的默认位置
var marker4 = L.Marker.movingMarker([
[45.816667, 15.983333]
], []).addTo(map);
//设置地图的点击事件，使标记移动到点击的位置
map.on("click", function (e) {
marker4.moveTo(e.latlng, 2000);
});
//=========================================================================
var marker5 = L.Marker.movingMarker(
barcelonePerpignanPauBordeauxMarseilleMonaco,
10000, {
autostart: true
}).addTo(map);
marker5.addStation(1, 2000);
marker5.addStation(2, 2000);
marker5.addStation(3, 2000);
marker5.addStation(4, 2000);
L.polyline(barcelonePerpignanPauBordeauxMarseilleMonaco, {
color: 'green'
}).addTo(map);
</script>
</body>
</html>