Question

我希望距离矩阵接受来自2个不同下拉框的值。当前收到“无效请求”。

这是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原点和var目标包含硬编码的（lat：x，lng：y}，则距离矩阵有效。我更改innerHTML的部分按预期返回了lat：{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}”）的字符串。

如果使选择的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>

选择列表值到Google Distance Matrix API中-Javascript / HTML

1 个答案: