Функция возврата расстояний с использованием матрицы расстояний Google Maps

Question

Итак, я пытаюсь создать в jquerymobile простой сервис «Расположение магазина», где на одном экране можно составить список всех магазинов и показать расстояние от текущей позиции, используя API-интерфейсы Google Maps.

Я смотрел на этот пример: 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с необходимой информацией.Теперь я застрял на том, как использовать calcDistances (), чтобы заполнить каждый div, где он принадлежит каждому магазину!Я не понимаю, как вернуть результаты вышеупомянутой функции, так как callback () уже определяет var outputDiv = document.getElementById('outputDiv');, который на данный момент работает только на 1 div ... Что мне нужно сделать, чтобы каждый раз, когда я вызываю CalculateDistances (), этозаполняет div я хочу?

Спасибо, ребята

Answer 1

Самый простой способ - использовать соответствующие элементы div внутри цикла вместо добавления всех выходных данных к innerHTML того же элемента div. Таким образом, в вашем цикле обратного вызова вы можете получить что-то вроде этого:

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] отправителей и пунктов назначения будут помещены в отдельный div с идентификатором outputDiv_i_j, например 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 />";
    }
}

После этого вы можете делать все что угодно с вашим массивом.