我对传单非常陌生，我希望有人可以帮助我。 我想做的是在地图上添加两个标记，并让另一个标记沿着路线走。
我找到了一些可以提供帮助的插件，但是这些插件使您在地图上进行标记，而不是遵循特定的路线。 http://ewoken.github.io/Leaflet.MovingMarker/
我知道如何在谷歌地图中完成，但不知道在传单中如何完成。 https://www.youtube.com/watch?v=zbr-F9wVqgU
你很接近。您选择了 Leaflet 插件并且有一个非常精确的目标。 您只需遵循此处的说明即可。
让我们实现它：
// here is the path (get it from where you want)
var coordinateArray = [ [0,1], [1,1], [1,0] ];
// or for example
var coordinateArray = existingPolyline.getLatLngs();
// here is the line you draw (if you want to see the animated marker path on the map)
var myPolyline = L.polyline(coordinateArray);
myPolyline.addTo(map);
// i don't know if i understood your question correctly
// if you want to put a marker at the beginning and at the end of the path :
var mstart = L.marker(coordinateArray[0]).addTo(map);
var mend = L.marker(coordinateArray[coordinateArray.length - 1]).addTo(map);
// here is the moving marker (6 seconds animation)
var myMovingMarker = L.Marker.movingMarker(coordinateArray, 6000, {
autostart: false
});
map.addLayer(myMovingMarker);
myMovingMarker.start();
由于任何用于动画标记的 Leaflet 插件都得到维护，我建议实现您自己的播放解决方案：
const leafletMap = L.map(document.getElementById("leaflet-container")).setView([0, 0], 1);
const dataset = [{
lng: -100,
lat: -80,
timestamp: new Date().getTime()
}];
let timestamp = 1710067901850;
for (let i = 1; i < 300; i++) {
dataset.push({
lng: dataset[i - 1].lng + Math.random(),
lat: dataset[i - 1].lat + Math.random(),
timestamp: dataset[i - 1].timestamp + 500
});
};
let marker = L.marker(dataset[0], { icon: new L.Icon({ iconUrl: '/marker.svg', iconSize: [20, 20], iconAnchor: [10, 20] }) });
marker.addTo(leafletMap);
let path = L.polyline(dataset[0]);
path.addTo(leafletMap);
let tick = dataset[0].timestamp;
const endTime = dataset[dataset.length - 1].timestamp;
let interval;
function start() {
interval = setInterval(() => {
if (tick > endTime) {
// End of animation: leave tracks and markers where they are but stop intervals
stop();
} else {
// Create or update the marker
moveMarker();
// Update tick including speed
tick += 500;
}
}, 100);
}
function stop() {
clearInterval(interval);
tick = dataset[0].timestamp;
marker.setLatLng(dataset[0]);
}
function moveMarker() {
// Look for the timestamp just before tick
let closestPointIndex = -1;
for (let i = 0; i < dataset.length && closestPointIndex < 0; i += 1) {
const timestamp = dataset[i].timestamp;
if (timestamp > tick) {
closestPointIndex = i === 0 ? 0 : i - 1;
}
}
marker.setLatLng(dataset[closestPointIndex]);
path.setLatLngs(dataset.slice(0, closestPointIndex + 1));
}
function pause() {
clearInterval(interval);
}
function setCursor(time) {
tick = parseInt(time);
moveMarker();
}button {
background-color: slateblue;
border: 1px solid skyblue;
color: lightblue;
font-size: 1.25em;
padding: 10px 20px;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
}
button:hover {
background-color: darkslateblue;
color: white;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<section style="display: flex; width: 200px; margin: auto">
<button
onclick="start()"
style="border-radius: 10px 0 0 10px; font-size: 1.5em"
>
▶
</button>
<button
onclick="pause()"
style="border-radius: 0"
>
❚❚
</button>
<button
onclick="stop()"
style="border-radius: 0 10px 10px 0; font-size: 2em; padding-top: 2px"
>
■
</button>
</section>
<div id="leaflet-container" style="width: 70vw; height: 70vh; margin: 50px auto"></div>
</body>
<script src="leaflet-animate.js"></script>
</html>来自这篇文章。