phpstudy集成环境

 首页 > 使用高德地图API获取多个地点间距时为何会不按顺序输出？

使用高德地图API获取多个地点间距时为何会不按顺序输出？

我要做什么：现有55个地点坐标，希望获取它们两两之间的行车路程。

我做了什么：我试图通过循环来调用高德API，依次输出结果。（为了防止循环过快，使用了setTimeout来暂停。）

有什么问题：1、每一次运行得到的结果都有一部分不一样。2、输出的数据也不是按照循环顺序排列的。（用两个for循环嵌套结果也是如此。）

这两点让我很疑惑，不知我代码有问题，还是和高德API本身有关，该如何解决呢？

下面是部分代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>地图路线规划服务</title>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=这里是高德的key"></script>
</head>
<body onLoad="mapInit()">
  <div id="buttons">
    <ul>
      <li>
        <button onclick="javascript:driving_route();">驾车行程</button>
      </li>
      <li>
        <button onclick="javascript:clearMap();">清空</button>
      </li>
    </ul>
  </div>
  <div id="result"></div>
</body>

<script language="javascript">
var mapObj;
var route_text = "";
//初始化地图对象，加载地图
function mapInit(){
    mapObj = new AMap.Map("iCenter",{
    center:new AMap.LngLat(120.1000, 30.8766), //地图中心点：湖州
    level:11  //比例尺
    });
}
//清空地图
function clearMap(){
    mapObj.clearMap();
    document.getElementById("result").innerHTML = '&nbsp;';
}

//地址坐标
var ad = new Array();
ad[0]=new AMap.LngLat(120.10266,30.867054)
ad[1]=new AMap.LngLat(120.09536,30.866726)
ad[2]=new AMap.LngLat(120.10358,30.872642)
ad[3]=new AMap.LngLat(120.11806,30.868422)
ad[4]=new AMap.LngLat(120.114014,30.862691)
ad[5]=new AMap.LngLat(120.104868,30.856874)

//驾车导航
function driving_route() {
  clearMap();
  mapObj.plugin(["AMap.Driving"], function() {
    var DrivingOption = {
      policy: AMap.DrivingPolicy.LEAST_TIME
    };
    for (var i=0; i<5; i++){
      var j=i+1;
      function f(){
        if(j<6){
          var MDrive = new AMap.Driving(DrivingOption);
          AMap.event.addListener(MDrive, "complete", driving_routeCallBack);
          MDrive.search(ad[i],ad[j]);
          j++;
          setTimeout(f(),50);
        }
      }
      f(j);
    }
  });
}   
//导航结果
function driving_routeCallBack(data) {
  var routeS = data.routes;
  if (routeS.length <= 0) {
  }
  else{
    var totaldis = 0;
    for(var v=0; v<routeS.length; v++){
      var distance = routeS[v].distance; //行车距离
      totaldis += distance;  //总路程
    }
    route_text = route_text + "　" + totaldis;
    document.getElementById("result").innerHTML = route_text;
  }
}

问题之前已解决，看到这么久也没别人回答，我自己说一下解决思路吧。
问题出在回调函数异步加载上，如果直接用 for 循环执行，就会受制于网络请求速度，导致输出混乱。但是，这里如果使用递归，先执行输出再进行下一步，就没有问题了。

【热门文章】
【热门文章】