轨迹回放时地图标记频繁闪烁如何优化？

UX-嘉赫提问于 2026-02-15 05:28:26 阅读 32

交互

在用Leaflet做轨迹回放时，每隔500ms更新标记位置，但地图总是卡顿闪烁，调整时间间隔也没用，这是怎么回事？

我按以下方式实现的：setInterval循环遍历坐标数组，每次创建新标记并删除旧标记：


let currentMarker;
function updatePosition(index) {
  if (currentMarker) map.removeLayer(currentMarker);
  const coords = trackData[index];
  currentMarker = L.marker([coords.lat, coords.lng]).addTo(map);
}

这样虽然能移动标记，但地图缩放时明显掉帧，控制台没有报错。试过把setInterval改成requestAnimationFrame反而更卡，求解

地图应用轨迹回放

我来解答赞 10 收藏

反馈

1 条解答

萌新.怡硕 Lv1

问题出在频繁创建和删除标记上，改用单个标记更新位置就行了。

let currentMarker = L.marker([0, 0]).addTo(map);

function updatePosition(index) {

  const coords = trackData[index];

  currentMarker.setLatLng([coords.lat, coords.lng]);

}

如果还卡，加上防抖处理：只在地图静止时更新位置。

map.on('movestart', () => map.stop = true);

map.on('moveend', () => map.stop = false);

function updatePosition(index) {

  if (map.stop) return;

  const coords = trackData[index];

  currentMarker.setLatLng([coords.lat, coords.lng]);

}

2026-02-15 08:00