时间戳

首页 > 解决方案 > 将列表值选择到 Google 距离矩阵 API - Javascript/HTML

google-maps - 将列表值选择到 Google 距离矩阵 API - Javascript/HTML

问题描述

我希望距离矩阵接受来自 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 origin 和 var destination 包含硬编码的 (lat: x, lng: y}，则距离矩阵有效。我更改 innerHTML 的部分按预期返回 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};

标签： google-mapsgoogle-maps-api-3google-maps-markers

解决方案

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

如果您value将 select 设置为有效的 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);

概念证明小提琴

代码片段：

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>

推荐阅读