如何在JS中解析Google Distance Matrix API响应，仅提取距离与时长？

问题分析 #

你之前的代码存在几个关键问题：

1. 单位系统枚举值错误：Google Maps API中UnitSystem的公制枚举是大写的METRIC，而非小写metric
2. 第二段代码中直接对JSON字符串访问属性：将响应转为字符串后，必须先解析为JSON对象才能读取rows等属性
3. 错误处理变量未定义、语法错误（如第二段代码中markersArray的赋值错误）

修正方案1：回调式实现（基于你的第一段代码） #

function calculateDistance() {
  var origin = $('#origin').val();
  var destination = $('#destination').val();
  var service = new google.maps.DistanceMatrixService();
  
  service.getDistanceMatrix({
    origins: [origin],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC, // 启用公制单位，直接返回公里
    avoidHighways: false,
    avoidTolls: false
  }, callback);
}

function callback(response, status) {
  if (status !== google.maps.DistanceMatrixStatus.OK) {
    $('#result').html('请求失败：' + status); // 修复未定义的err变量
    return;
  }

  var origin = response.originAddresses[0];
  var destination = response.destinationAddresses[0];
  var element = response.rows[0].elements[0];

  if (element.status === "ZERO_RESULTS") {
    $('#result').html(`无可用路线：${origin} 与 ${destination} 之间无道路连接`);
    return;
  }

  // 直接从API获取格式化后的公里距离和分钟时长
  var distanceKiloText = element.distance.text; // 示例："3.5 km"
  var distanceKiloValue = element.distance.value / 1000; // 纯数值：3.5
  var durationMinText = element.duration.text; // 示例："10 mins"
  var durationMinValue = element.duration.value / 60; // 纯数值：10

  // 渲染到页面
  $('#in_kilo').text(distanceKiloValue.toFixed(2));
  $('#duration_text').text(durationMinText);
  $('#from').text(origin);
  $('#to').text(destination);
}

修正方案2：Promise式实现（基于你的第二段代码） #

<script>
// @ts-nocheck
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -25.7461, lng: 28.1881 }, // 比勒陀利亚坐标
    zoom: 12,
  });

  const service = new google.maps.DistanceMatrixService();
  const origin = "634 Pretorius street, Pretoria, South Africa";
  const destination = "263 luttig street, Pretoria, South Africa";
  const request = {
    origins: [origin],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC, // 公制单位
    avoidHighways: false,
    avoidTolls: false,
  };

  document.getElementById("request").innerText = JSON.stringify(request);

  // 使用Promise处理响应
  service.getDistanceMatrix(request).then((response) => {
    const responseStr = JSON.stringify(response);
    document.getElementById("response").innerHTML = responseStr;
    // 直接在回调中解析，无需额外myDistance函数
    renderDistance(response);
  }).catch((err) => {
    document.getElementById("distance").innerHTML = '请求错误：' + err.message;
  });
}

function renderDistance(response) {
  const element = response.rows[0].elements[0];
  if (element.status === "ZERO_RESULTS") {
    document.getElementById("distance").innerHTML = '无可用路线';
    return;
  }
  // 获取公里距离和分钟时长
  const distance = element.distance.text;
  const duration = element.duration.text;
  document.getElementById("distance").innerHTML = `距离：${distance}，时长：${duration}`;
}
</script>

关键注意事项 #

• 单位系统：必须使用google.maps.UnitSystem.METRIC（大写），API会直接返回公里（km）和分钟（mins）格式的文本
• 响应解析：如果将响应转为字符串存储，必须用JSON.parse()解析为对象后才能访问属性
• 错误处理：始终处理status状态，包括ZERO_RESULTS、OVER_QUERY_LIMIT等异常情况

内容的提问来源于stack exchange，提问作者John Christ BOUMA