Google Maps Distance Matrixを使用して距離関数を返す

Question

jquerymobileで簡単な「店舗の場所」サービスを構築しようとしています.1つの画面ですべての店舗のリストを作成し、現在の位置からの距離をGoogleマップAPI。

私はこの例を見ていた： http://code.google.com/apis/maps/documentation/javascript/examples/distance-matrix.html

ウィッヒから、私は次のコードを使用していた：それは必要な情報を#outputDivを移入としてそれは、OK作品

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 />"; 
     } 
     } 
    } 
    } 

を。 ここで、calculateDistances（）を使用して各店舗に所属する各divに値を設定する方法について説明します。コールバック（）がすでにvar outputDiv = document.getElementById('outputDiv');を定義しているので、上記の関数の結果を返す方法を理解していません。 calculateDistances（）を呼び出すたびに何をする必要がありますか？私はしたいdiv？

はみんな

Answer 1

代わりに同じdiv要素のinnerHTMLプロパティにすべての出力を追加するのは、ループ内の対応するdivを使用することです最も簡単な方法は、ありがとうございました。あなたはこのような何かを持つことができますコールバックであなたのループ中のSO：

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 />"; 
    } 
} 

これは、例えばoutputDiv_1_3のために、ID outputDiv_i_jとの別個のdivに起源と目的地の各ペア[I、J]の結果を入れます。

他の代替は、配列に結果を固執するだろう - 配列から、あなたが好きなの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 />"; 
    } 
} 

を、あなたはあなたの配列で、あなたが好きなものは何でもすることができます。