使用Google Maps距离矩阵返回距离函数

Question

我正在尝试在jQuery手机中建立一个简单的“商店位置”服务，在一个屏幕上，使用谷歌地图API，列出所有商店的列表，并显示离当前位置的距离。

我看过这个例子：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！我不明白如何返回上述函数的结果，因为callback()已经定义了var outputDiv = document.getElementById('outputDiv');，它现在只在1个div上工作。

我需要做什么才能让每次调用calculateDistances()时，它都会填充我想要的div？

Answer 1

最简单的方法是在循环中使用相应的div，而不是将所有输出附加到同一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 />";
    }
}

在此之后，您可以随心所欲地处理数组。