JS调用Google Roads API获取speedLimit存入数组为空问题排查

嘿，我来帮你捋清楚这个问题！你的代码里有几个关键问题导致speedobject始终是空数组，咱们一个个拆解：

1. 循环变量的作用域冲突 #

你在外层循环和内层循环都用了var i来声明索引变量，但var是函数级作用域，这意味着两个循环的i其实是同一个变量。当内层同步ajax执行时，会直接修改外层的i值，导致外层循环逻辑混乱，甚至可能提前终止循环，根本没机会往数组里塞数据。

2. Google Roads API的响应结构理解错误 #

这才是最核心的问题！你打印的speedlimits其实是API返回的完整响应对象，它的结构大概是这样的：

{
  "speedLimits": [
    {
      "speedLimit": 60,
      "units": "KPH",
      "placeId": "..."
    }
  ]
}

你现在的代码里直接写speedlimits.length，但外层的响应对象根本没有length属性（只有数组才有），所以内层循环的条件i < speedlimits.length永远不成立，循环完全没执行，自然数组是空的。

3. 同步Ajax的隐患（非直接原因，但必须提） #

你用了async: false来强制同步请求，这会阻塞浏览器的主线程，导致页面假死，而且现在很多现代浏览器已经开始限制同步ajax在某些场景下的使用，非常不推荐。

修正后的代码示例 #

我把上面的问题都修复了，你可以参考：

// 提前声明要存储数据的数组
let speedobject = [];

$.ajax({
  url: dburl,
  dataType: 'json',
  // 先保留你的同步设置，后续建议改成异步
  async: false, 
  type: 'GET',
  data: model,
  success: function (data) {
    if (data.length !== 0) {
      const speeddata = data;
      // 用let声明i，每个循环迭代都有独立的变量
      for (let i = 0; i < speeddata.length; i++) {
        const path = `path=${speeddata[i].Latitude2},${speeddata[i].Longitude2}`;
        const googleurl = `https://roads.googleapis.com/v1/speedLimits?${path}&key=${roadsapikey}`;
        
        $.ajax({
          url: googleurl,
          dataType: 'json',
          async: false,
          type: 'GET',
          success: function(apiData) {
            // 正确访问API返回的speedLimits数组
            if (apiData.speedLimits && apiData.speedLimits.length > 0) {
              // 内层循环用j，避免和外层i冲突
              for (let j = 0; j < apiData.speedLimits.length; j++) {
                speedobject.push({
                  speedlimits: apiData.speedLimits[j].speedLimit
                });
              }
              console.log("当前已收集的限速数据：", speedobject);
            } else {
              console.log(`第${i+1}个路径没有返回限速数据`);
            }
          }
        });
      }
    }
  },
  error: function () {
    alert("Error");
  }
});

更推荐的异步写法（避免阻塞） #

如果你能改成异步请求，体验会好很多，用jQuery的Promise来处理多个请求：

let speedobject = [];

$.ajax({
  url: dburl,
  dataType: 'json',
  type: 'GET',
  data: model
}).done(function(data) {
  if (data.length === 0) return;
  
  // 把所有Google API请求的Promise收集起来
  const requests = data.map(item => {
    const path = `path=${item.Latitude2},${item.Longitude2}`;
    const googleurl = `https://roads.googleapis.com/v1/speedLimits?${path}&key=${roadsapikey}`;
    
    return $.ajax({
      url: googleurl,
      dataType: 'json',
      type: 'GET'
    }).done(function(apiData) {
      if (apiData.speedLimits) {
        apiData.speedLimits.forEach(limit => {
          speedobject.push({ speedlimits: limit.speedLimit });
        });
      }
    });
  });
  
  // 等所有请求完成后再打印最终结果
  $.when(...requests).done(function() {
    console.log("所有限速数据收集完成：", speedobject);
  });
}).fail(function() {
  alert("Error");
});

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