Google 距离矩阵结果中的 if..else 语句

Question

我正在使用 Google Distance Matrix API 来计算从一个点到另一个点的行驶距离 + 时间。

我想在距离搜索的结果中添加 if..elseif..else 语句，以根据距离（例如 10 公里）的大小来改变答案，但我是 JS 的新手并且似乎无法弄清楚将语句粘贴到我的代码中的位置。有什么建议吗？

这是我的代码：

$(function(){
   function calculateDistance(origin, destination) {
      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(err);
      } else {
        var origin = response.originAddresses[0];
        var destination = response.destinationAddresses[0];
        if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
          $('#result').html("We can't seem to find "
                            + origin + ". Are you sure you entered a valid postcode and place?");
        } else {
          var distance = response.rows[0].elements[0].distance;
          var duration = response.rows[0].elements[0].duration;
          var distance_value = distance.value;
          var distance_text = distance.text;
          var duration_value = duration.value;
          var duration_text = duration.text;
          var kilometer = distance_text.substring(0, distance_text.length - 3);
          $('#result').html("It is " + kilometer + " kilometer from " + origin + " to " + destination + " and it takes " + duration_text + " to drive.");
        }
      }
    }

    $('#distance_form').submit(function(e){
        event.preventDefault();
        var origin = $('#origin').val();
        var destination = $('#destination').val();
        var distance_text = calculateDistance(origin, destination);
    });

  });

Answer 1

一种选择是在 callback 函数中使用条件逻辑，如下所示：

function callback(response, status) {
  if (status !== google.maps.DistanceMatrixStatus.OK) {
    $('#result').html(err);
    return;
  }
  if (response.rows[0].elements[0].status !== "OK") {
    $('#result').html("We can't seem to find " + origin + ". Are you sure you entered a valid postcode and place?");
    return;
  }
  var origin = response.originAddresses[0];
  var destination = response.destinationAddresses[0];
  var distance = response.rows[0].elements[0].distance;
  var duration = response.rows[0].elements[0].duration;
  var distance_value = distance.value;
  var distance_text = distance.text;
  var duration_value = duration.value;
  var duration_text = duration.text;
  var kilometer = distance_text.substring(0, distance_text.length - 3);

  if (distance_value > 10000) {
    $('#result').html('Distance is greater than 10km');
  } else {
    $('#result').html('Distance is less than 10km');
  }
}

响应验证在函数开始时完成，如果请求没有返回所需的状态，你return 提前并停止函数的执行。完成这些验证语句后，您可以从响应中提取所有必要的数据，然后根据您提取的任何值执行条件语句。

在我的示例中，如下所示：

if (distance_value > 10000) {
  $('#result').html('Distance is greater than 10km');
} else {
  $('#result').html('Distance is less than 10km');
}

我检查距离值是否大于 10000 米（10 公里），并据此显示不同的结果。

Here is a JSBin 有一个工作示例。