使用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地圖距離矩陣返回距離功能

回答

相關問題