Question

我想显示一个起点和目的地旅行点与Google距离矩阵响应值相同的网格。为此，我在阵列中具有GPS起点和终点的坐标。我能够构建网格，并且无法从API回调填充每一行的Google距离。

var dataArray = [];

//使用Ajax请求从数据库获取结果。

success:function(data.d)
dataArray = data.d.slice();

//示例数据集是：StartLatitude，StartLongitude，EndLatitude，EndLongitude，UserName，LoggedTime等。

在这里，我需要在Web应用程序中将数组显示为网格，并用一列代表用户所行进的每个距离的Google距离

//此处使用延迟执行

GoogleDistance().then(LoadGrid);

///使用Google距离矩阵API获取每条记录的距离

var responseCount = [];
var GoogleDistance = function () {
     var defer = $.Deferred();
     var distanceService = new google.maps.DistanceMatrixService();
     responseCount = [];
     //dataArray => has the grid row details , which includes gps origin and destination info

    for (i = 0; i <= (dataArray.length - 1) ; i++) {
            distanceService.getDistanceMatrix(
            {
                origins: [{ lat: parseFloat(dataArray[i].StartLatitude), lng: parseFloat(dataArray[i].StartLongitude) }],
                destinations: [{ lat: parseFloat(dataArray[i].EndLatitude), lng: parseFloat(dataArray[i].EndLongitude) }],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.IMPERIAL,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    //validation
                } else {
                    if (origin == "") responseCount.push(0);
                    else if (destination == "") responseCount.push(0);
                    else if (response.rows[0].elements[0].status === "ZERO_RESULTS") responseCount.push(0);
                    else if (response.rows[0].elements[0].status === "NOT_FOUND") responseCount.push(0);
                    else {
                        var distance = response.rows[0].elements[0].distance;
                        var distance_text = distance.text;
                        responseCount.push(distance_text);
                    }
                }
            });

        }
        //to overcome asynchrounous execution and gather all API response 
        var tid = setInterval(ValidateGoogleResponseCount, 200);
        function ValidateGoogleResponseCount() {
            if (responseCount.length == dataArray.length) {
                //console.log("response ready");
                abortTimer();
                defer.resolve(); // When this fires, the code in a().then(/..../); is executed.
                return defer;
            }
        }
        function abortTimer() { // to be called when you want to stop the timer
            clearInterval(tid);
        }
        return defer;
    }

//使用Google距离响应构建网格

var LoadGrid = function () {
var defer = $.Deferred();
var tableInfo = "";
$.each(selectedInfo, function (index, travelInfo) {
     tableInfo += '<tr class="tdInfo">' +
        '<td>' + travelInfo.StartPoint + '</td>'+
        '<td>' + travelInfo.EndPoint + '</td>'
        '<td class="text-center ActualDistance">' + responseCount[index] + 
'</td>' +
});
 defer.resolve();
 return defer;
};

我能够获取所有请求的响应，并将其存储在数组responseCount中。用于API请求的坐标顺序始终是相同的，但是对于不同的执行，响应顺序是不同的。因此，我无法在网格单元中绑定正确的匹配结果。

关键问题是：jQuery异步执行，Google API响应顺序，

如何在每行网格单元格中显示Google距离矩阵API响应？

0 个答案: