谷歌地图查询两地开车路线 Google Maps API V3: DirectionsService (Driving Directions) example...-CSDN博客

本文链接：https://blog.csdn.net/iteye_5904/article/details/82635283

本文介绍如何使用Google Maps API V3及其DirectionsService来绘制驾车路线，并展示距离及预计行驶时间。通过示例代码及截图，展示了如何在网页上实现从输入地址到显示路线的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

In this article I will explain with example and attached source code, how to use the Google Maps API V3 to plot driving directions and route on Google Maps using the DirectionsService.

HTML Markup

The HTML Markup consists of two TextBoxes first one for entering Source address while the other for entering destination address, a Button and three HTML DIVs for displaying the distance and duration details, plotting map and displaying directions.

<table border="0" cellpadding="0" cellspacing="3">
<tr>
    <td colspan="2">
        Source:
        <input type="text" id="txtSource" value="Bandra, Mumbai, India" style="width: 200px" />
        &nbsp; Destination:
        <input type="text" id="txtDestination" value="Andheri, Mumbai, India" style="width: 200px" />
        <br />
        <input type="button" value="Get Route" οnclick="GetRoute()" />
        <hr />
    </td>
</tr>
<tr>
    <td colspan="2">
        <div id="dvDistance">
        </div>
    </td>
</tr>
<tr>
    <td>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </td>
    <td>
        <div id="dvPanel" style="width: 500px; height: 500px">
        </div>
    </td>
</tr>
</table>

Calculate Distance, Travel Duration, draw (plot) Route and display Directions using DirectionsService

Inside the Google Maps window load event handler, for the source and the destination TextBoxes I have implemented Google Places Autocomplete TextBox. For more details please refer Implement Google Places Autocomplete TextBox .

When the Button is clicked, first the Map and the Directions service is initialized to display the map and the directions in their respective HTML DIVs.

Then using the source and destination addresses from the respective TextBoxes, the details of the directions, route, distance and duration are displayed inside the respective HTML DIVs.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
    new google.maps.places.SearchBox(document.getElementById('txtSource'));
    new google.maps.places.SearchBox(document.getElementById('txtDestination'));
    directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
 
function GetRoute() {
    var mumbai = new google.maps.LatLng(18.9750, 72.8258);
    var mapOptions = {
        zoom: 7,
        center: mumbai
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvPanel'));
 
    //*********DIRECTIONS AND ROUTE**********************//
    source = document.getElementById("txtSource").value;
    destination = document.getElementById("txtDestination").value;
 
    var request = {
        origin: source,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
 
    //*********DISTANCE AND DURATION**********************//
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
        origins: [source],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, function (response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
            var distance = response.rows[0].elements[0].distance.text;
            var duration = response.rows[0].elements[0].duration.text;
            var dvDistance = document.getElementById("dvDistance");
           dvDistance.innerHTML = "";
            dvDistance.innerHTML += "Distance: " + distance + "<br />";
            dvDistance.innerHTML += "Duration:" + duration;
 
        } else {
            alert("Unable to find the distance via road.");
        }
    });
}
</script>

Screenshot

Google Maps API V3: DirectionsService (Driving Directions) example