谷歌地图行车路线源代码为他们的例子？答案

【问题标题】：Google map driving direction source code for their example?谷歌地图行车路线源代码为他们的例子？
【发布时间】：2011-04-23 06:00:50
【问题描述】：

谷歌举了一个例子 http://googlemapsapi.blogspot.com/2007/05/driving-directions-support-added-to.html

源代码是否在某处可用，或者是否有关于该精确示例的教程？

【问题讨论】：

您打算使用 V2 API 还是 V3？推荐使用后者，因为 V2 已被弃用。
V3（如果推荐）。我现在正在学习，所以我想要一些源代码。
请给个链接让源码明白！！！

标签： google-maps google-maps-api-3 driving-directions

【解决方案1】：

这是一个使用v3 API 的非常基本的示例：

<!DOCTYPE html>
    <html> 
    <head> 
       <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Maps API v3 Directions Example</title> 
       <script type="text/javascript" 
               src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </head> 
    <body style="font-family: Arial; font-size: 12px;"> 
       <div style="width: 600px;">
         <div id="map" style="width: 280px; height: 400px; float: left;"></div> 
         <div id="panel" style="width: 300px; float: right;"></div> 
       </div>
       
       <script type="text/javascript"> 
    
         var directionsService = new google.maps.DirectionsService();
         var directionsDisplay = new google.maps.DirectionsRenderer();
    
         var map = new google.maps.Map(document.getElementById('map'), {
           zoom:7,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
        
         directionsDisplay.setMap(map);
         directionsDisplay.setPanel(document.getElementById('panel'));
    
         var request = {
           origin: 'Chicago', 
           destination: 'New York',
           travelMode: google.maps.DirectionsTravelMode.DRIVING
         };
    
         directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
           }
         });
       </script> 
    </body> 
    </html>

截图：

【讨论】：

谢谢，这正是我想要的：学习的简约示例。
嗨，我可以为同一来源添加多个目的地，并一次获取所有目的地的路线方向..
@danial vassallo 感谢这个有用的答案。这是否有它给出的响应输出的语言选项。？
嗨丹尼尔，我已经实现了你的答案，它工作正常，我稍微修改了一下，我在请求中添加了 alternative:true，所以它给了我多条路线，并且如果我点击其中一条路线，它会立即在地图上显示路线，现在我想知道用户点击了哪条路线？有什么方法可以保存该路线的详细信息吗？你能给我一些建议吗？
@hardik 没有问题。我看到这是一段时间前的事，但我想如果他们需要的话，我会为其他来到这个岗位的人提供帮助。干杯

【解决方案2】：

在 JavaScript 中使用 v3 API 使用纬度/经度或使用地址而不使用谷歌地图获取路线、行程和其他数据的代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=<key>&libraries=places"></script>

<script>
    var directionsService = new google.maps.DirectionsService();

    var start_lat = "41.8781136";
    var start_lon = "-87.6297982";
    var end_lat = "40.7127753";
    var end_lon = "-74.0059728";

    // Using Latitude and longitude
    var request = {
        origin: new google.maps.LatLng(start_lat, start_lon),
        destination: new google.maps.LatLng(end_lat, end_lon),
        optimizeWaypoints: true,
        avoidHighways: false,
        avoidTolls: false,
        travelMode: google.maps.TravelMode.DRIVING
    };

    //Using plain address
    // var request = {
    //     origin: { query: "Chicago, IL, USA" },
    //     destination: {  query: "New York, NY, USA" },
    //     travelMode: google.maps.TravelMode.DRIVING,
    // };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            var route = response.routes[0];
            var leg = response.routes[0].legs[0];
            var polyline = route.overview_polyline;
            var distance = route.legs[0].distance.value;
            var duration = route.legs[0].duration.value;

            console.log(route); // Complete route
            console.log(distance); // Only distance 
            console.log(duration); // Only duration
            console.log(leg); // Route options/list
            console.log(polyline); // Polyline data
        }
    });

</script>

【讨论】：