Google Maps Directions API - 在按钮点击时显示备用路线

Question

how do I change the currently displayed route on a Google map on button click? 如何在按钮点击时更改Google地图上当前显示的路线？ Currently I am able to show only the primary route that is being returned. 目前，我只能显示正在返回的主要路由。 I am also able to loop through all the routes that was returned by the API. 我也可以循环遍历API返回的所有路由。 I just can't seem to find the way to change display between the routes that I have. 我似乎无法找到改变我所拥有的路线之间的显示方式。 Below is what I have so far. 以下是我到目前为止的情况。

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps API Implementation</title>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
        var directionsDisplay = new google.maps.DirectionsRenderer();
        var directionsService = new google.maps.DirectionsService();
        var validRoutes = [];

        function initialize() {

            // ----- MAP SETUP ----- //
            var pierLocation = new google.maps.LatLng(14.6023936,120.9591289);
            var destinationLat = 14.60540879665969; // Sample data only
            var destinationLong = 120.9795238; // Sample data only
            var destinationLocation = new google.maps.LatLng(destinationLat,destinationLong);

            var mapProperties = {
                center:pierLocation,
                zoom:15,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("googleMap"),mapProperties);

            directionsDisplay.setMap(map);
            calculateRoutes(pierLocation, destinationLocation);

        }

        function calculateRoutes(pierLocation, destinationLocation) {
            var request = {
                origin: pierLocation,
                destination: destinationLocation,
                travelMode: 'DRIVING',
                provideRouteAlternatives: true
            };
            directionsService.route(request, function(result, status) {
                if (status === 'OK') {
                    directionsDisplay.setDirections(result);
                    var summaryPanel = document.getElementById('directions-panel');
                    summaryPanel.innerHTML = '';

                    for (var x=0; x<result.routes.length; x++) {

                        new google.maps.DirectionsRenderer({
                            map: googleMap,
                            directions: result,
                            routeIndex: x
                        });

                        summaryPanel.innerHTML += '<hr><br><b> Route ' + (x+1) + ':<br>';
                        var route = result.routes[x];
                        for (var y=0; y<route.legs.length; y++) {
                            var routeSegment = y + 1;

                            summaryPanel.innerHTML += route.legs[y].start_address + ' to ';
                            summaryPanel.innerHTML += route.legs[y].end_address + '<br>';
                            summaryPanel.innerHTML += route.legs[y].distance.text + '<br><br>';

                            var steps = route.legs[y].steps;
                            for (var z=0; z<steps.length; z++) {
                                var nextSegment = steps[z].path;
                                summaryPanel.innerHTML += "<li>" + steps[z].instructions;

                                var dist_dur = "";
                                if (steps[z].distance && steps[z].distance.text) dist_dur += steps[z].distance.text;
                                if (steps[z].duration && steps[z].duration.text) dist_dur += "&nbsp;"+steps[z].duration.text;
                                if (dist_dur != "") {
                                summaryPanel.innerHTML += "("+dist_dur+")<br /></li>";
                                } else {
                                summaryPanel.innerHTML += "</li>";
                                }

                            }

                            summaryPanel.innerHTML += "<br>";
                        }
                    }
                }
                 else {
                    window.alert('Directions request failed due to ' + status);
                    }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="googleMap" style="width:500px;height:380px;"></div><br>
    <label id="directions-panel"></label>
</body>
</html>

Here is a screenshot . 这是一个截图。

Thanks in advance!! 提前致谢！！

Answer 1

Use DirectionsDisplay.setRouteIndex() . 使用DirectionsDisplay.setRouteIndex() 。

<input id="btn1" type="button" value="route1" onclick="directionsDisplay.setRouteIndex(0);" />
<input id="btn2" type="button" value="route2" onclick="directionsDisplay.setRouteIndex(1);" />
<input id="btn3" type="button" value="route3" onclick="directionsDisplay.setRouteIndex(2);" />

proof of concept fiddle 概念证明小提琴

code snippet: 代码段：

 var directionsDisplay = new google.maps.DirectionsRenderer(); var directionsService = new google.maps.DirectionsService(); var validRoutes = []; var map; function initialize() { // ----- MAP SETUP ----- // var pierLocation = new google.maps.LatLng(14.6023936, 120.9591289); var destinationLat = 14.60540879665969; // Sample data only var destinationLong = 120.9795238; // Sample data only var destinationLocation = new google.maps.LatLng(destinationLat, destinationLong); var mapProperties = { center: pierLocation, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), mapProperties); directionsDisplay.setMap(map); calculateRoutes(pierLocation, destinationLocation); } function calculateRoutes(pierLocation, destinationLocation) { var request = { origin: pierLocation, destination: destinationLocation, travelMode: 'DRIVING', provideRouteAlternatives: true }; directionsService.route(request, function(result, status) { if (status === 'OK') { directionsDisplay.setDirections(result); var summaryPanel = document.getElementById('directions-panel'); summaryPanel.innerHTML = ''; for (var x = 0; x < result.routes.length; x++) { new google.maps.DirectionsRenderer({ map: map, directions: result, routeIndex: x }); summaryPanel.innerHTML += '<hr><br><b> Route ' + (x + 1) + ':<br>'; var route = result.routes[x]; for (var y = 0; y < route.legs.length; y++) { var routeSegment = y + 1; summaryPanel.innerHTML += route.legs[y].start_address + ' to '; summaryPanel.innerHTML += route.legs[y].end_address + '<br>'; summaryPanel.innerHTML += route.legs[y].distance.text + '<br><br>'; var steps = route.legs[y].steps; for (var z = 0; z < steps.length; z++) { var nextSegment = steps[z].path; summaryPanel.innerHTML += "<li>" + steps[z].instructions; var dist_dur = ""; if (steps[z].distance && steps[z].distance.text) dist_dur += steps[z].distance.text; if (steps[z].duration && steps[z].duration.text) dist_dur += "&nbsp;" + steps[z].duration.text; if (dist_dur != "") { summaryPanel.innerHTML += "(" + dist_dur + ")<br /></li>"; } else { summaryPanel.innerHTML += "</li>"; } } summaryPanel.innerHTML += "<br>"; } } } else { window.alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, 'load', initialize);

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="googleMap" style="width:500px;height:380px;"></div><br> <input id="btn1" type="button" value="route1" onclick="directionsDisplay.setRouteIndex(0);" /> <input id="btn2" type="button" value="route2" onclick="directionsDisplay.setRouteIndex(1);" /> <input id="btn3" type="button" value="route3" onclick="directionsDisplay.setRouteIndex(2);" /> <label id="directions-panel"></label>

Google Maps Directions API - 在按钮点击时显示备用路线

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-26 11:38:13

Google Maps Directions API - 在按钮点击时显示备用路线

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-26 11:38:13

解决方案1
0 已采纳 2016-08-26 11:38:13