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

时间:2018-02-25 19:47:07

标签: javascript jquery if-statement google-maps-api-3

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

我想将if..elseif..else语句添加到距离搜索的结果中,以根据距离的大小(例如<或> 10 km)来改变答案,但我是新手到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);
    });

  });

1 个答案:

答案 0 :(得分: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有一个工作示例。