0

这是我的示例代码

var selected_path = [];

            for (var i = 0; i <path.length-1; i++) {
                    var request = {
                    origin: path[i],
                    destination: path[i+1],
                    travelMode: google.maps.DirectionsTravelMode.WALKING

                }

                directionsService.route(request, function(results, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        selected_path = selected_path.concat(results.routes[0].overview_path);

                    }
                })

            }
            console.log(selected_path);  // slected_path in console is []
            poly.setPath(selected_path);
            poly.setMap(map);

在这种情况下，控制台中的 selected_pa​​th 是 []。当我在 console.log(selected_pa​​th) 之前添加 alert(i) 行时。添加后的代码如下：

var selected_path = [];

            for (var i = 0; i <path.length-1; i++) {
                    var request = {
                    origin: path[i],
                    destination: path[i+1],
                    travelMode: google.maps.DirectionsTravelMode.WALKING

                }

                directionsService.route(request, function(results, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        selected_path = selected_path.concat(results.routes[0].overview_path);

                    }
                })

            }
            alert(i)   ////// ADDED ONE LINE
            console.log(selected_path); /// selected_path in console has proper value
            poly.setPath(selected_path);
            poly.setMap(map);

变量 i 在屏幕上显示为警报，变量 selected_pa​​th 具有适当的值。谁能给我解释一下，因为我不明白。为了澄清它在 Firefox 中有效，可能不适用于 chrome。

4

2 回答 2

4

我认为这是由于该directionsService.route方法的异步行为。它在ajax 调用完成后调用回调函数。

因此，当您显示警报时，之后代码 (console.log) 的执行将被推迟，直到您单击 OK 按钮。这足以让 ajax 调用完成并填充selected_path变量。在没有警报的版本中，没有这样的延迟，因此 ajax 调用尚未完成，并且很可能selected_path在 console.log 运行之前无法填充。

要解决此问题，您可以做两件事：

  1. 把你要执行的代码也selected_path填入回调函数中。
  2. 启动超时以检查它是否已满，并仅在已满时运行代码。

所以第一个解决方案是这样做：

 directionsService.route(request, function(results, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      selected_path = selected_path.concat(results.routes[0].overview_path);

      alert(i)   ////// ADDED ONE LINE
      console.log(selected_path); /// selected_path in console has proper value
      poly.setPath(selected_path);
      poly.setMap(map);
    }
  })

第二个是这样的：

 directionsService.route(request, function(results, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      selected_path = selected_path.concat(results.routes[0].overview_path);
    }
  })

  (function test() {
    if (selected_path.length > 0) {
      alert(i)   ////// ADDED ONE LINE
      console.log(selected_path); /// selected_path in console has proper value
      poly.setPath(selected_path);
      poly.setMap(map);
    } else {
      setTimeout(test, 200);
    }
  })();

如果可能的话，我会使用第一个。

于 2012-05-20T12:23:40.537 回答
1

这是因为您正在设置selected_path异步回调。这alert(i)需要足够的时间来评估异步回调，这就是它起作用的原因。但是你不能依赖它（以及你不能依赖它setTimeout(function(){console.log(selected_path);}, 0)，它应该工作相同），因为异步调用可能需要很长时间。

解决方案是将所有使用的代码selected_path和所有应该在它之后评估的代码放入回调中，如下所示：

directionsService.route(request, function(results, status) {
     if (status == google.maps.DirectionsStatus.OK) {
          var selected_path = selected_path.concat(results.routes[0].overview_path);
          poly.setPath(selected_path);
          poly.setMap(map);
          // ...
     }
});
于 2012-05-20T12:25:03.940 回答