使用谷歌地图距离矩阵返回距离函数答案

【问题标题】：Returning Distances function using Google Maps Distance Matrix使用谷歌地图距离矩阵返回距离函数
【发布时间】：2011-07-24 16:55:37
【问题描述】：

我正在尝试在 jQuery mobile 中构建一个简单的“商店位置”服务，在一个屏幕中，使用 Google 地图 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？

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3

【解决方案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 />";
    }
}

在此之后，你可以对你的数组做任何你喜欢的事情。

【讨论】：