Select 列表值到 Google 距离矩阵 API - Javascript/HTML

Question

我希望距离矩阵接受来自 2 个不同下拉框的值。当前获得 'INVALID REQUEST'.

这是2个下拉框；

 <select id="SelectDriver"> 
 <option value="{lat: 52.6, lng: 1}">DRIVER 1</option>
 <option value="{lat: 51.3, lng: -1.1}">DRIVER 2</option>
 <option value="{lat: 53.1, lng: -1.6}">DRIVER 3</option>
 </select>

 <select id="SelectDriver2"> 
 <option value="{lat: 52.6, lng: 1}">DRIVER 1</option>
 <option value="{lat: 51.3, lng: -1.1}">DRIVER 2</option>
 <option value="{lat: 53.1, lng: -1.6}">DRIVER 3</option>
 </select><br>

这里是距离矩阵代码

document.getElementById('CheckDistance').onclick = function() {
document.getElementById('TestingMatrix').innerHTML =    
document.getElementById('SelectDriver').value;                                                                                                                                                                

    var origin1 = document.getElementById('SelectDriver').value;
    var origin2 = document.getElementById('SelectDriver').value;
    var destinationA = document.getElementById('SelectDriver2').value;
    var destinationB = document.getElementById('SelectDriver2').value;

如果 var origin 和 var destination 包含硬编码的 (lat: x, lng: y}，则距离矩阵确实有效。我按预期更改 innerHTML returns lat long 的部分：{ lat: 52.6, lng: 1} - 所以不能解释为什么请求不同，它是完全相同的数据。有人能告诉我为什么这不起作用吗？

如果我使用

，代码就可以工作

    var origin1 = {lat: 52.6, lng: 1};
    var origin2 = {lat: 52.6, lng: 1};
    var destinationA = {lat: 51.3, lng: -1.1};
    var destinationB = {lat: 51.3, lng: -1.1};

Answer 1

DistanceMatrix 需要匿名对象（LatLngLiteral 对象）作为参数，而不是看起来像匿名对象的字符串（“{lat: 52.6, lng: 1}”）。

如果您使 select 的 value 成为有效的 JSON 字符串，您可以对其调用 JSON.parse 以获取将与DistanceMatrix:

<select id="SelectDriver"> 
 <option value='{"lat": 52.6, "lng": 1}'>DRIVER 1</option>
 <option value='{"lat": 51.3, "lng": -1.1}'>DRIVER 2</option>
 <option value='{"lat": 53.1, "lng": -1.6}'>DRIVER 3</option>
 </select>

<select id="SelectDriver2"> 
 <option value='{"lat": 52.6, "lng": 1}'>DRIVER 1</option>
 <option value='{"lat": 51.3, "lng": -1.1}'>DRIVER 2</option>
 <option value='{"lat": 53.1, "lng": -1.6}'>DRIVER 3</option>
 </select><br>

然后可以像这样解析成匿名对象：

var origin1 = JSON.parse(document.getElementById('SelectDriver').value);

proof of concept fiddle

代码片段：

function initialize() {
  document.getElementById('TestingMatrix').innerHTML =
    document.getElementById('SelectDriver').value;

  var origin1 = JSON.parse(document.getElementById('SelectDriver').value);
  var destinationA = JSON.parse(document.getElementById('SelectDriver2').value);
  var service = new google.maps.DistanceMatrixService;
  var request = {
    origins: [origin1],
    destinations: [destinationA],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  };
  console.log(JSON.stringify(request));
  service.getDistanceMatrix(request, function(response, status) {
    if (status !== 'OK') {
      alert('Error was: ' + status);
    } else {
      var originList = response.originAddresses;
      var destinationList = response.destinationAddresses;
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = '';

      for (var i = 0; i < originList.length; i++) {
        var results = response.rows[i].elements;
        for (var j = 0; j < results.length; j++) {
          outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
            ': ' + results[j].distance.text + ' in ' +
            results[j].duration.text + '<br>';
        }
      }
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="SelectDriver">
  <option value='{"lat": 52.6, "lng": 1}' selected="selected">DRIVER 1</option>
  <option value='{"lat": 51.3, "lng": -1.1}'>DRIVER 2</option>
  <option value='{"lat": 53.1, "lng": -1.6}'>DRIVER 3</option>
</select>

<select id="SelectDriver2">
  <option value='{"lat": 52.6, "lng": 1}'>DRIVER 1</option>
  <option value='{"lat": 51.3, "lng": -1.1}' selected="selected">DRIVER 2</option>
  <option value='{"lat": 53.1, "lng": -1.6}'>DRIVER 3</option>
</select><br>
<input type="button" id="CheckDistance" value="Check distance" />
<div id="TestingMatrix"></div>
<div id="output"></div>

Select 列表值到 Google 距离矩阵 API - Javascript/HTML

Select list value into Google Distance Matrix API - Javascript/HTML

google-maps

google-maps-api-3

google-maps-markers