使用Google地图距离矩阵返回距离功能

因此，即时通讯尝试在jquerymobile中构建一个简单的“商店位置”服务，在一个屏幕中，使用谷歌地图制作所有商店的列表并显示距离当前位置的距离API。使用Google地图距离矩阵返回距离功能

我一直在寻找这个例子： http://code.google.com/apis/maps/documentation/javascript/examples/distance-matrix.html

从至极我使用下面的代码：

function calculateDistances() { 
    var service = new google.maps.DistanceMatrixService(); 
    service.getDistanceMatrix(
     { 
     origins: [origin1, origin2], 
     destinations: [destinationA, destinationB], 
     travelMode: google.maps.TravelMode.DRIVING, 
     unitSystem: google.maps.UnitSystem.METRIC, 
     avoidHighways: false, 
     avoidTolls: false 
     }, callback); 
    } 

    function callback(response, status) { 
    if (status != google.maps.DistanceMatrixStatus.OK) { 
     alert('Error was: ' + status); 
    } else { 
     var origins = response.originAddresses; 
     var destinations = response.destinationAddresses; 
     var outputDiv = document.getElementById('outputDiv'); 
     outputDiv.innerHTML = ''; 

     for (var i = 0; i < origins.length; i++) { 
     var results = response.rows[i].elements; 
     for (var j = 0; j < results.length; j++) { 
      outputDiv.innerHTML += origins[i] + " to " + destinations[j] 
       + ": " + results[j].distance.text + " in " 
       + results[j].duration.text + "<br />"; 
     } 
     } 
    } 
    }

它的工作原理确定，因为它填充#outputDiv与所需的信息。现在，我坚持如何使用calculateDistances（）来填充每个div所属的每个存储区！我不明白如何返回上述函数的结果，因为回调（）已经定义var outputDiv = document.getElementById('outputDiv');到现在只适用于1格... 我需要做什么，以便每次我调用calculateDistances（），它填充我想要的div？

谢谢你们

来源

2011-07-24 pedrosss

最简单的方法是使用循环内的相应申报单，而不是附加所有输出到同一个DIV的innerHTML。因此，在你的回调循环，可以有这样的事情：

for (var i = 0; i < origins.length; i++) { 
    var results = response.rows[i].elements; 
    for (var j = 0; j < results.length; j++) { 
     var outputDiv = document.getElementById("outputDiv_"+i+"_"+j); 
     outputDiv.innerHTML = origins[i] + " to " + destinations[j] 
      + ": " + results[j].distance.text + " in " 
      + results[j].duration.text + "<br />"; 
    } 
}

这将会把结果每对[I，J]起点和终点与ID outputDiv_i_j一个单独的DIV，例如outputDiv_1_3。

另一种选择是坚持的结果到一个数组 - 然后输出从阵列中任何div的你喜欢的值：

var output = new Array(); 
for (var i = 0; i < origins.length; i++) { 
    var results = response.rows[i].elements; 
    for (var j = 0; j < results.length; j++) { 
     output[i][j] = origins[i] + " to " + destinations[j] 
      + ": " + results[j].distance.text + " in " 
      + results[j].duration.text + "<br />"; 
    } 
}

在此之后，你可以做任何你与你的阵列喜欢。

来源

2011-07-24 18:38:38

谢谢Aleks :) – pedrosss

使用Google地图距离矩阵返回距离功能

回答

相关问题