如何从Google Maps Distance Matrix API获取精确的distance.value值？

看起来你已经找对了获取精确距离值的方向，但可能有几个容易忽略的小问题导致你还是拿到text格式的结果，我来帮你一步步排查：

1. 先确认你的代码是否真的生效了 #

浏览器经常会缓存旧的JavaScript代码，哪怕你修改了文件，页面可能还是在跑旧逻辑。试试这几个操作：

• 强制刷新页面（Windows用Ctrl+F5，Mac用Cmd+Shift+R）
• 打开浏览器开发者工具的「Network」面板，勾选「禁用缓存」选项，再重新测试
• 直接清除浏览器的缓存文件后再加载页面

2. 检查DOM元素的赋值逻辑 #

你代码里用document.getElementById("distance").value = distance;，要确保#distance是表单输入控件（比如<input type="number" id="distance">）：

• 如果是普通的文本展示元素（比如<div>或<span>），它没有value属性，你需要用textContent或innerHTML赋值：

  document.getElementById("distance").textContent = distance;
  

• 如果确实是输入框，那value是正确的赋值方式，这时候要检查输入框的类型是否允许输入数字（比如type="number"）

3. 添加调试日志，定位问题环节 #

在赋值前加一句日志，看看你实际拿到的distance变量到底是什么：

var distance = response.rows[0].elements[0].distance.value;
console.log('获取到的distance.value:', distance); // 打开控制台看这个输出
document.getElementById("distance").value = distance;

打开浏览器开发者工具的「Console」面板，看这个日志：

• 如果输出的是数字（比如12345，代表12345米），说明Google已经返回了正确的精确值，问题出在赋值到DOM的环节
• 如果输出的还是带单位的字符串（比如"12.3 km"），那说明你的代码没更新，或者有其他地方覆盖了这个值

4. 校验API响应的有效性 #

有时候虽然整体请求状态是OK，但单个元素的状态可能有问题（比如地址找不到），你可以加个校验：

var element = response.rows[0].elements[0];
var elementStatus = element.status;
console.log('元素状态:', elementStatus);

if (elementStatus !== 'OK') {
  console.warn('无法获取有效距离数据:', elementStatus);
  $('#error').html(elementStatus);
  return;
}

// 只有状态正常时才获取距离值
var distanceValue = element.distance.value;
document.getElementById("distance").value = distanceValue;

修改后的完整代码示例 #

把上面的校验和调试都加进去，代码会更健壮：

function getdistance(address){ 
  var dest_address = address; 
  var origin_address = document.getElementById('hall').value ; 
  var distanceService = new google.maps.DistanceMatrixService(); 

  distanceService.getDistanceMatrix({ 
    origins: [dest_address], 
    destinations: [origin_address], 
    travelMode: google.maps.TravelMode.DRIVING, 
    unitSystem: google.maps.UnitSystem.METRIC, 
    durationInTraffic: true, 
    avoidHighways: false, 
    avoidTolls: false 
  }, function (response, status) { 
    if (status !== google.maps.DistanceMatrixStatus.OK) { 
      console.log('API请求错误:', status); 
      $('#error').html('请求错误: ' + status);
      return; 
    } 

    var element = response.rows[0].elements[0];
    var elementStatus = element.status;
    $('#error').html(elementStatus);
    console.log('元素状态:', elementStatus);

    if (elementStatus !== 'OK') {
      console.warn('无法获取有效距离信息:', elementStatus);
      return;
    }

    var distanceValue = element.distance.value;
    console.log('精确距离值（米）:', distanceValue);
    document.getElementById("distance").value = distanceValue;
  }); 
}

注意：distance.value返回的是以米为单位的整数，如果你需要公里的话，可以自己转换：var distanceInKm = distanceValue / 1000;

内容的提问来源于stack exchange，提问作者Anthony Truong