Google Directions异步调用致步骤标记顺序异常的解决咨询

核心思路 #

异步请求的响应返回顺序不固定，不能依赖响应返回的顺序生成序号，必须提前给每个拆分的请求段绑定固定的序号偏移，确保最终拼接时按预设顺序处理。

具体实现步骤 #

• 拆分请求时明确分段的序号范围：
  拆分路线段时，记录每段对应的步骤序号起始值。比如第一段是Miami到第8个Waypoint，对应序号1_{X；第二段是第8个Waypoint到第16个，对应序号X+1}Y，以此类推。把这个起始序号和请求参数绑定（比如存入自定义标识）。

• 强制按预设顺序拼接响应结果：

  1. 初始化一个长度等于请求段数的数组，用数组索引对应请求段的顺序（0对应第一段，1对应第二段...）。
  2. 每个异步请求完成后，根据绑定的段序号，把响应数据放到数组对应位置，而非直接追加到结果。
  3. 所有请求完成后，按数组索引顺序依次拼接各段的步骤和标记点，同时按预设的序号偏移给每个步骤/标记点设置正确序号。

• 前端渲染严格按拼接后的顺序处理：
  拼接完成后，从第一个点（Miami）开始依次渲染标记点和步骤说明，确保序号从1开始递增。

• PHP后端辅助标记分段信息：
  PHP生成前端请求参数时，给每个拆分的API请求添加自定义segment_index参数（比如&segment_index=0），前端拿到响应后，根据这个索引确定该段在整体路线中的位置，避免顺序错乱。

关键代码示例（前端部分） #

// 已拆分好的请求列表，每个item包含API地址和段顺序索引
const routeRequests = [
  { apiUrl: 'https://maps.googleapis.com/maps/api/directions/json?origin=Miami&waypoints=...&key=YOUR_KEY', segmentIndex: 0 },
  { apiUrl: 'https://maps.googleapis.com/maps/api/directions/json?origin=...&waypoints=...&key=YOUR_KEY', segmentIndex: 1 },
  // 其他段...
];

const segmentResponses = new Array(routeRequests.length);
let completedRequests = 0;

routeRequests.forEach(req => {
  fetch(req.apiUrl)
    .then(res => res.json())
    .then(data => {
      segmentResponses[req.segmentIndex] = data;
      completedRequests++;
      
      // 所有请求完成后拼接处理
      if (completedRequests === routeRequests.length) {
        let currentStepNumber = 1;
        const fullRoute = { routes: [{ legs: [] }] };
        
        segmentResponses.forEach(segData => {
          // 拼接路线段
          fullRoute.routes[0].legs.push(...segData.routes[0].legs);
          // 给步骤设置正确序号
          segData.routes[0].legs.forEach(leg => {
            leg.steps.forEach(step => {
              step.customStepNumber = currentStepNumber++;
            });
          });
        });
        
        // 调用渲染函数生成地图和步骤
        renderMapAndSteps(fullRoute);
      }
    });
});

额外注意事项 #

• 确保每个拆分请求的终点是下一段的起点，避免路线断裂。
• 给每个请求添加超时处理，防止单个请求失败导致整体流程卡住。
• 页面加载时可先单独渲染起点（Miami），等所有请求完成后再补充后续标记和路线。

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