从 Google 地图中将 JSON 数据读入 webpage/html 表格 距离 API

Question

我对 Google 地图距离 API 还很陌生。 我正在尝试创建一个表格，使用经度和纬度计算两点之间的距离。

<a href="https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=53.487362,-2.227197&destinations=51.516595,-0.129279&key=API_KEY">
click here for distance
</a>

单击 link 会给我一个 JSON 格式的结果页面。

我如何读取 "distance:text"（209 英里）数据并将值放入同一页面上的 <div> 或 <input>。

提前致谢。

Answer 1

看来您需要在客户端获取并显示此数据，因此您应该使用 JavaScript 调用 client-side 距离矩阵服务。不是网络服务（称为服务器端）。例如：

HTML

<button id="distance-btn" onClick="getDistance()">
  Click here for distance
</button>
<div id="distance"></div>

JS

function getDistance() {
  const origin = '53.487362,-2.227197';
  const destination = '51.516595,-0.129279';

  var distanceService = new google.maps.DistanceMatrixService();
  distanceService.getDistanceMatrix({
    origins: [origin],
    destinations: [destination],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== 'OK') {
      alert('Error was: ' + status);
    } else {
      const distance = response.rows[0].elements[0].distance.text
      document.getElementById('distance').innerText = distance;
    }
  });
}

工作jsfiddle。

话虽如此，如果您只想计算 1 个起点和 1 个终点之间的距离，那么您最好使用 Directions service instead. Check out this other fiddle。

希望对您有所帮助！