Google Maps Javascript API - 结果格式

Question

我需要在不进行地理编码的情况下显示距离矩阵请求的结果。问题是我的位置太靠近了，因此生成的地理编码地址是相同的。

如果我可以显示带有变量名称甚至原始纬度/经度坐标对的结果，我将能够区分这些位置。

我查看了有关距离矩阵响应元素的文档，但没有看到此功能。

JavaScript 如下。

function initMap() {
  var bounds = new google.maps.LatLngBounds;
  var markersArray = [];

  var origin1 = {lat: 37.2692332704, lng: -81.7261622975};
  var origin2 = {lat: 37.2625193371, lng:  -81.7183645359};
  var origin3 = {lat: 37.1315998981, lng:  -81.8552666961};
  var destinationA = {lat: 37.1854557602, lng: -81.7946133276};
  var destinationB = {lat: 37.1751720467, lng: -81.792833926};
  var destinationC = {lat: 37.1595851233, lng:  -81.8570206921};

  var destinationIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?' +
      'chst=d_map_pin_letter&chld=O|FFFF00|000000';
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.2692332704, lng: -81.7261622975},
    zoom: 8
  });
  var geocoder = new google.maps.Geocoder;

  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: [origin1, origin2,origin3],
    destinations: [destinationA, destinationB,destinationC],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = '';


      var showGeocodedAddressOnMap = function(asDestination) {
        var icon = asDestination ? destinationIcon : originIcon;
        return function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            map.fitBounds(bounds.extend(results[0].geometry.location));
            markersArray.push(new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              icon: icon
            }));
          } else {
            alert('Geocode was not successful due to: ' + status);
          }
        };
      };

      for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;
        //geocoder.geocode({'address': originList[i]},
            //showGeocodedAddressOnMap(false));
        for (var j = 0; j < results.length; j++) {
          //geocoder.geocode({'address': destinationList[j]},
              //showGeocodedAddressOnMap(true));
          outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
              ': ' + results[j].distance.text + ' in ' +
              results[j].duration.text + '<br>';
        }
      }
    }
  });
}

提前致谢。

Answer 1

结果按请求的顺序返回。

出发地 1 - 目的地 1 出发地 1 - 目的地 2 出发地1 - 目的地3 出发地 2 - 目的地 1 --- 出发地 3 - 目的地 3

您可以使用您的原始请求来确定用于计算结果的确切坐标。

proof of concept fiddle

代码 sn-p：

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  var markersArray = [];

  var destinationIcon = 'https://chart.googleapis.com/chart?' +
    'chst=d_map_pin_letter&chld=D|FF0000|000000';
  var originIcon = 'https://chart.googleapis.com/chart?' +
    'chst=d_map_pin_letter&chld=O|FFFF00|000000';
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 37.2692332704,
      lng: -81.7261622975
    },
    zoom: 8
  });
  var originArray = [origin1, origin2, origin3];
  var destinationArray = [destinationA, destinationB, destinationC];
  for (var i = 0; i < originArray.length; i++) {
    var oMarker = new google.maps.Marker({
      position: originArray[i],
      map: map,
      label: "" + i,
      icon: originIcon
    });
    bounds.extend(oMarker.getPosition());
  }
  for (var i = 0; i < destinationArray.length; i++) {
    var dMarker = new google.maps.Marker({
      position: destinationArray[i],
      map: map,
      label: "" + i,
      icon: destinationIcon
    });
    bounds.extend(dMarker.getPosition());
  }
  map.fitBounds(bounds);
  var service = new google.maps.DistanceMatrixService;
  service.getDistanceMatrix({
    origins: originArray,
    destinations: destinationArray,
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = '';
      outputHTML = "";
      outputHTML += "<table border='1'><thead><tr><th>Oi</th><th>origin</th><th></th><th>Di</th><th>destination</th><th>distance</th><th>duration</th></tr></thead><tbody>";
      for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          outputHTML += "<tr><td>O" + i + "</td><td>" + originArray[i].lat + "," + originArray[i].lng + "</td><td> to </td><td>D" + j + "</td><td>" + destinationArray[j].lat + "," + destinationArray[j].lng +
            "</td><td>" + results[j].distance.text + "</td><td> in " +
            results[j].duration.text + "</td></tr>";
        }
      }
      outputHTML += "</tbody></table>";
      outputDiv.innerHTML = outputHTML;
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

var origin1 = {
  lat: 37.2692332704,
  lng: -81.7261622975
};
var origin2 = {
  lat: 37.2625193371,
  lng: -81.7183645359
};
var origin3 = {
  lat: 37.1315998981,
  lng: -81.8552666961
};
var destinationA = {
  lat: 37.1854557602,
  lng: -81.7946133276
};
var destinationB = {
  lat: 37.1751720467,
  lng: -81.792833926
};
var destinationC = {
  lat: 37.1595851233,
  lng: -81.8570206921
};

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="output"></div>
<div id="map"></div>