如何优化JavaScript路径移动代码 修复多目的地动态适配bug

原代码仅适配3个点位（2段路线）的核心原因是存在4处逻辑硬伤：

• 索引越界：固定取routes[pointsObj.i + 1]作为航段终点，当路线点位总数超过3个时，最后一段航段会取到不存在的数组元素，返回undefined导致坐标计算失效
• 全局计数污染：currentNumSteps为全局变量，走完第一段航段后计数不会重置，后续航段会直接触发航段切换判断，出现点位瞬移
• 语法逻辑漏洞：if (routes.length > 1)判断后未添加代码块包裹符，实际仅对下一行的变量声明生效，后续移动逻辑不受该判断约束
• 位置基准偏移：每帧位移计算没有和当前航段起点做对齐，多段路线拼接时容易出现点位偏离路线的问题

优化后代码不限制路线点位数量，只要按顺序把所有目的地坐标存入routes数组即可自动逐段移动，支持任意数量目的地扩展：

// 基础存储变量保持原有定义即可
var markers = new Map(); // 存储标记点
var routes = new Array(); // 按顺序存储所有途经点坐标，支持动态增删
const maxNumSteps = 60; // 单段路线移动总帧数，数值越大移动速度越慢
let userMarker = null; // 地图上的用户移动标记，初始化时完成赋值

/**
 * 逐帧移动核心逻辑
 * @param {Object} pointsObj 移动状态对象，存储当前航段索引、当前步进数
 */
const step = (pointsObj) => {
    // 边界判断：走到最后一个点位时终止，避免索引越界
    if (pointsObj.segmentIndex >= routes.length - 1) {
        // 全路线走完的自定义逻辑可写在此处，比如到点提示、触发后续事件
        return;
    }

    // 取当前航段的起点、终点坐标
    const pointA = routes[pointsObj.segmentIndex];
    const pointB = routes[pointsObj.segmentIndex + 1];

    // 计算单帧移动的经纬度步长
    const latStep = (pointB.lat - pointA.lat) / maxNumSteps;
    const lngStep = (pointB.lng - pointA.lng) / maxNumSteps;

    // 更新用户标记位置
    const currentLat = userMarker.getLatLng().lat + latStep;
    const currentLng = userMarker.getLatLng().lng + lngStep;
    userMarker.setLatLng(new L.LatLng(currentLat, currentLng));

    // 当前航段步进数累加
    pointsObj.currentStep++;

    // 当前航段走完，切换到下一航段，重置步进计数
    if (pointsObj.currentStep >= maxNumSteps) {
        pointsObj.segmentIndex++;
        pointsObj.currentStep = 0;
        // 校准位置，消除浮点计算累计误差，确保点位精准落在航段终点
        userMarker.setLatLng(new L.LatLng(pointB.lat, pointB.lng));
    }
}

// 初始化移动状态，每次新增/删除路线点后重新调用即可生效
function initMoveState() {
    // 初始位置对齐路线第一个点位
    if (routes.length > 0) {
        userMarker.setLatLng(new L.LatLng(routes[0].lat, routes[0].lng));
    }
    // 移动状态与全局变量解耦，支持同时运行多条独立移动轨迹
    const moveState = {
        segmentIndex: 0, // 当前所在航段索引
        currentStep: 0 // 当前航段已走步数
    }
    // 用requestAnimationFrame做帧循环，比setInterval动画更流畅
    function moveLoop() {
        step(moveState);
        if (moveState.segmentIndex < routes.length - 1) {
            requestAnimationFrame(moveLoop);
        }
    }
    requestAnimationFrame(moveLoop);
}

• 动态新增/删除目的地时，直接操作routes数组增删坐标点即可，不需要修改核心移动逻辑
• 中途需要变更路线时，先中断当前帧循环，更新routes数组后重新调用initMoveState()即可
• 调整maxNumSteps的数值可以控制全局移动速度，也可扩展逻辑给不同航段单独配置移动步数

内容的提问来源于stack exchange，提问作者Sss