2010-03-18 32 views
14

में दिशानिर्देश दूरी मैं सफल दिशाओं से दूरी प्राप्त करने के लिए Google Maps Directions Demo का उपयोग करने का तरीका जानने का प्रयास कर रहा हूं।Google मानचित्र 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); 

मैं, यह सिर्फ वी 2 में ठीक कर सकता है सिर्फ मुसीबत से काम v3 बराबर होने:

इस कोड को मैं अब तक है।

+0

में आपका स्वागत है ... यह एक दिलचस्प सवाल है, के रूप में यह v3 API संदर्भ में कहीं भी प्रलेखित किया जाना प्रतीत नहीं होता। –

+0

इसके अलावा आप स्टैक ओवरफ्लो http://stackoverflow.com/questions/3251609/how-to-get-total-driving-distance-with-google-maps-api-v3 – user672365

उत्तर

49

हालांकि यह प्रतीत नहीं होता आधिकारिक तौर पर प्रलेखित किया जाना, ऐसा लगता है कि आप DirectionsService.route() विधि से प्रतिक्रिया पार कर सकते हैं:

<!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> 

दिखाने वाला स्क्रीनशॉट दूरी और अवधि:: response.trips[0].routes[0].distance.value निम्न उदाहरण में, Google Maps API v3 Directions Demo

+0

पर निम्न उत्तर देख सकते हैं। मेरे लिए काम करना मुझे एक त्रुटि मिली "प्रतिक्रिया.tri परिभाषित नहीं है"। Upd। उत्तर - प्रतिक्रिया.trips [i] .routes [0] .duration.value प्रतिक्रिया होना चाहिए। [i] .legs [0] .duration.value। – Malx

+0

@ माल्क्स: सुधार के लिए धन्यवाद। मैंने जवाब अपडेट किया। यह अजीब बात है, क्योंकि मुझे यकीन है कि मैंने उस उदाहरण का परीक्षण किया जब मैंने इसे पोस्ट किया था। असल में, मुझे स्क्रीनशॉट मिला है :) –

+0

यह अजीब नहीं है - एपीआई बदल दी गई थी। मुझे Google समूहों पर जवाब मिला। – Malx

2

चयनित उत्तर ठीक से काम करता है यदि मार्ग में केवल एक ही रास्ता है। यहाँ यदि आप कई वेपोइंट है कैसे पूरी लंबाई का तरीका देखें: स्टैक ओवरफ़्लो के

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); 
संबंधित मुद्दे