Google Maps API v3中的路線距離

我試圖弄清楚如何使用Google Maps Directions Demo來獲得成功路線的距離。Google Maps API v3中的路線距離

這是我到目前爲止的代碼：

var googleMaps = { 
    // HTML Nodes 
    fromInput: google_maps_from, 
    toInput: google_maps_to, 

    // API Objects 
    dirService: new google.maps.DirectionsService(), 
    dirRenderer: new google.maps.DirectionsRenderer(), 
    map: null, 

    showDirections: function(dirResult, dirStatus) { 
    if (dirStatus != google.maps.DirectionsStatus.OK) 
    { 
    //Here we'll handle the errors a bit better :P 
     alert('Directions failed: ' + dirStatus); 
     return; 
    } 
    else 
    { 
    //Get the distance here 
    //onGDirectionsLoad(); 
    } 

    // Show directions 
    googleMaps.dirRenderer.setMap(googleMaps.map); 
    googleMaps.dirRenderer.setPanel(document.getElementById("directions")); 
    googleMaps.dirRenderer.setDirections(dirResult); 
    }, 

    getSelectedTravelMode: function() { 
    return google.maps.DirectionsTravelMode.DRIVING; 
    }, 

    getSelectedUnitSystem: function() { 
    return google.maps.DirectionsUnitSystem.METRIC; 
    }, 

    getDirections: function() { 
    var fromStr = googleMaps.fromInput; 
    var toStr = googleMaps.toInput; 
    var dirRequest = { 
     origin: fromStr, 
     destination: toStr, 
     travelMode: googleMaps.getSelectedTravelMode(), 
     unitSystem: googleMaps.getSelectedUnitSystem(), 
     provideTripAlternatives: true 
    }; 
    googleMaps.dirService.route(dirRequest, googleMaps.showDirections); 
    }, 

    init: function() { 
    googleMaps.map = new google.maps.Map(document.getElementById("map_canvas"), { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    // Show directions onload 
    googleMaps.getDirections(); 
    } 
}; 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', googleMaps.init);

我能做到這一點只在V2很好，只是有麻煩的工作了v3的等價物。

來源

2010-03-18 Yawn

歡迎堆棧溢出...這是一個有趣的問題，因爲它似乎並沒有被在V3 API參考記錄任何地方。 – 2010-03-18 19:20:53

你也可以看看以下答案在stackoverflow http://stackoverflow.com/questions/3251609/how-to-get-total-driving-distance-with-google-maps-api-v3 – user672365 2013-08-22 01:42:16

雖然似乎它不被正式記錄，它看起來像你可以遍歷從DirectionsService.route()方法的響應：response.trips[0].routes[0].distance.value，如在下面的例子：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Directions Complex</title> 
    <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"></script> 
</head> 
<body style="font-family: Arial; font-size: 13px; color: red;"> 
    <div id="map" style="width: 400px; height: 300px;"></div> 
    <div id="duration">Duration: </div> 
    <div id="distance">Distance: </div> 

    <script type="text/javascript"> 

    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 

    var myOptions = { 
    zoom:7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var map = new google.maps.Map(document.getElementById("map"), myOptions); 
    directionsDisplay.setMap(map); 

    var request = { 
     origin: 'Chicago', 
     destination: 'New York', 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 

     // Display the distance: 
     document.getElementById('distance').innerHTML += 
      response.routes[0].legs[0].distance.value + " meters"; 

     // Display the duration: 
     document.getElementById('duration').innerHTML += 
      response.routes[0].legs[0].duration.value + " seconds"; 

     directionsDisplay.setDirections(response); 
     } 
    }); 
    </script> 
</body> 
</html>

截圖示出距離和持續時間： Google Maps API v3 Directions Demo

來源

2010-03-18 19:14:05

它不是爲我工作。我收到一個錯誤「response.trips not defined」。 UPD。答案 - response.trips [i] .routes [0] .duration.value應該是 response.routes [i] .legs [0] .duration.value。 – Malx 2010-06-24 16:03:45

@Malx：感謝您的糾正。我更新了答案。這很奇怪，因爲我確定我在發佈它時測試了這個示例。事實上，我就是這樣獲得屏幕截圖的:) – 2010-06-24 16:59:58

這並不奇怪 - API已更改。我在谷歌組上找到了答案。 – Malx 2010-08-14 10:13:27

如果路線只有一個航點，則所選答案將正常工作。以下是如何獲得全長如果你有多個航點：

var distance= 0; 
for(i = 0; i < response.routes[0].legs.length; i++){ 
    distance += parseFloat(response.routes[0].legs[i].distance.value); 
     //for each 'leg'(route between two waypoints) we get the distance and add it to the total 
} 
console.log(distance);

來源

2015-04-27 17:21:50

Google Maps API v3中的路線距離

回答

相關問題