提取距離

Question

這裏是我的代碼：

var directionDisplay; 
     var directionsService = new google.maps.DirectionsService(); 

     function initialize() { 
     document.getElementById('hide').style.display = 'none'; 
     document.getElementById('hide2').style.display = 'none'; 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var mapOptions = { 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: new google.maps.LatLng(14.588723, 120.975768), 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 

     //Find From location  
    var fromText = document.getElementById('start'); 
    var fromAuto = new google.maps.places.Autocomplete(fromText); 
    fromAuto.bindTo('bounds', map); 
    //Find To location 
    var toText = document.getElementById('end'); 
    var toAuto = new google.maps.places.Autocomplete(toText); 
    toAuto.bindTo('bounds', map); 
    // 


     directionsDisplay.setMap(map); 
     directionsDisplay.setPanel(document.getElementById('directions-panel')); 

     var control = document.getElementById('control'); 
     control.style.display = 'block'; 
     map.controls[google.maps.ControlPosition.TOP].push(control); 
     } 

     function calcRoute() { 
     var start = document.getElementById('start').value; 
     var end = document.getElementById('end').value; 
     var request = { 
      origin: start, 
      destination: end, 

    provideRouteAlternatives: main_route, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      computeTotalDistance(response); 
      } 
     }); 
     } 
      function calcRoute1() { 
      if (window.event.keyCode == 13){ 
     var start = document.getElementById('start').value; 
     var end = document.getElementById('end').value; 
     var request = { 
      origin: start, 
      destination: end, 
      provideRouteAlternatives: true, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 

     }; 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
      computeTotalDistance(response); 

      } 
     }); 
     }} 
     function computeTotalDistance(result) { 

     var total = 0; 
     var myroute = result.routes[0]; 
     for (i = 0; i < myroute.legs.length; i++) { 
     total += myroute.legs[i].distance.value; 

     } 

我設置：

provideRouteAlternatives: true 

和我在directionsPanel獲得替代路線

我可以通過這種方式獲得主要路線的距離：

var myroute = result.routes[0]; 
     for (i = 0; i < myroute.legs.length; i++) { 
     total += myroute.legs[i].distance.value; 

     } 

所以，我可以計算出租車費用，例如。

但是當我點擊替代路線時，顯示在directionsPanel，我無法弄清楚如何獲得新的距離。所以它可以計算新的票價。

請幫忙！

Answer 1

收聽DirectionsRenderer上的directions_changed事件。事件發生時，使用getRouteIndex來發現當前選擇的路線。然後用上面的代碼和新的路由索引一起使用。

https://developers.google.com/maps/documentation/javascript/reference#DirectionsRenderer