javascript - 如何使用谷歌地图中的功能返回距离

Question

我有来自此链接的脚本 here我想让函数返回距离，这是我的实际脚本:

var calcRoute = function(origin,destination) {
    var dist;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
  var request = {
    origin:origin,
    destination:destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      dist = response.routes[0].legs[0].distance.value / 1000;
    }
  });
    return dist;
};
$scope.resto = calcRoute("-7.048357, 110.418877","-7.048443, 110.441022");

我在函数中放入了两个参数，我希望函数返回距离，但是

返回距离；

在脚本中不返回值

距离 = response.routes[0].legs[0].distance.value/1000

我正在使用angularjs，并且我的 View 中的resto没有显示距离，请有人帮助我，脚本有问题还是其他什么问题？

Answer 1

在执行directionsService.route函数之前，calcRoute函数已经执行并返回未定义的dist。

您将在directionsService.route的回调函数中获取值

您可以向 calcRoute 函数添加另一个参数(回调函数)。现在，一旦 directionsService.route 获得响应，您就可以将该值传递给这个新的回调函数。

试试这个。

var calcRoute = function(origin,destination,cb) {
    var dist;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
  var request = {
    origin:origin,
    destination:destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      cb(null, response.routes[0].legs[0].distance.value / 1000);
    }
    else {
      cb('pass error information');
    }
  });
};
calcRoute("-7.048357, 110.418877","-7.048443, 110.441022", function (err, dist) {
    if (!err) {        
      $scope.resto = dist;
    }
});