谷歌地图:如何通过拖拽DirectionRender服务显示的路径来检测改变的事件

Question

我使用谷歌地图为一个classis的情况。下面是代码:

// create map
            var map = new google.maps.Map(document.getElementById("map_canvas"), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer();
            var dirContainer=document.getElementById('dir-container');
             dirRenderer.setOptions({
                 draggable:true,
             });
             var showDirections = function(dirResult, dirStatus) {
            if (dirStatus != google.maps.DirectionsStatus.OK) {
                alert('Veuillez saisir des adresses valides');
                return;
              }
              // Show directions
            dirRenderer.setMap(map);
            dirRenderer.setDirections(dirResult);
            dirRenderer.setPanel(dirContainer);
        };
       dirService.route($scope.master, showDirections);

我想触发一个用户修改路由的事件。可以通过拖放选项修改路由:

dirRenderer.setOptions({
                     draggable:true,
                 });

我怎样才能赶上这个事件。我已经在我的代码中有这个事件:

   google.maps.event.addListener(dirRenderer, 'routeindex_changed', 
                    function() {  });   
  google.maps.event.addListener(dirRenderer, 'directions_changed', 
                    function() {  });

Answer 1

它在google API指示示例中提供。下面是拖动后触发事件的代码。

       directionsDisplay.addListener('directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
        console.log(directionsDisplay);
      });

如果您对computeTotalDistance函数更感兴趣

function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}