Question

所以，我试图在jquerymobile中构建一个简单的“商店位置”服务，在一个屏幕中，使用谷歌地图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 />";
    }
}

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

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

1 个答案: