Question

我在存储多个路线的距离和持续时间方面存在问题，我从谷歌地图api获取，我能够存储第一条路线的距离和持续时间，但我希望距离和持续时间所有替代路线来自我的map.here是代码：身体 { font-family：Arial; font-size：10pt; } var source，destination; var directionsDisplay; //整个地图渲染或显示。

        var directionsService = new google.maps.DirectionsService();  // For Availing the Direction Services provided by APIs

        google.maps.event.addDomListener(window, 'load', function () {              //  This acts as a pageload 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 kolkata = new google.maps.LatLng(22.7383075, 88.454424);  // Center of the Map
            var mapOptions =
        {              // Setting the View of the Map
                zoom: 7,
                center: kolkata
            };

            map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);   // Variable for map view

            directionsDisplay.setMap(map);                              // Map view

            directionsDisplay.setPanel(document.getElementById('dvPanel'));  //Panel View

            //------------------------------DIRECTIONS AND ROUTE------------------------------------------------------

            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

            var request =                       
        {                                   // DirectionsService
                origin: source,
                destination: destination,
        provideRouteAlternatives: true,
                travelMode: google.maps.TravelMode.DRIVING
            };

            directionsService.route(request, function (response, status)
        {                  // RouteService
                if (status == google.maps.DirectionsStatus.OK) 
        {
                    directionsDisplay.setDirections(response);
                }
        });

            //-----------------------------DISTANCE AND DURATION----------------------------------------------------

            var service = new google.maps.DistanceMatrixService();          // Different Services Provided by APIs
            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;    //  Distance Calculation From data provide by APIs
                    var duration = response.rows[0].elements[0].duration.text;      //  Duration Calculation From data provide by APIs
                    var dvDistance = document.getElementById("dvDistance");         // This Variable is for Fetching the Routes distance and displaying it on web page.
                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML += "Distance: " + distance + "<br />";
                    dvDistance.innerHTML += "Duration:" + duration;

                    // Here's your AJAX request
                    var httpRequest;
                    if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
                        httpRequest = new XMLHttpRequest();
                    } else if (window.ActiveXObject) { // IE 6 and older
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    httpRequest.onreadystatechange = function() {
                        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                            alert(httpRequest.responseText);
                        }
                    };
                    httpRequest.open("POST", "saveDetails.php", true);
                    httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    httpRequest.send("&source=" + source + "&destination=" + destination + "&distance=" + distance + "&duration=" + duration);  

                } else {
                    alert("Unable to find the distance via road.");
                }
            });
        }
    </script>   
    <table border="0" cellpadding="0" cellspacing="3">
        <tr>
            <td colspan="2">
                Source:
                <input type="text" id="txtSource"  style="width: 200px" />
                &nbsp; Destination:
                <input type="text" id="txtDestination" style="width: 200px" />
                &nbsp; Travel Mode:
                <select>
                    <option value="1" selected>Driving</option>
                    <option value="2">Cycling</option>
                    <option value="3">Transit</option>
                    <option value="4">Walking</option>
                </select>
                <br/>
                <input type="button" value="Get Route" onclick="GetRoute()" />
                <hr />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvDistance">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="dvMap" style="width: 800px; height: 500px">
                </div>
            </td>
            <td>
                <div id="dvPanel" style="width: 500px; height: 500px">
                </div>
            </td>
        </tr>
    </table>
    <br>
</body>

and the php file is here:

<?php
$link = mysqli_connect("127.0.0.1", "root", "", "testdb");
        if (!$link) 
        {
            echo "Error: Unable to connect to MySQL." . PHP_EOL;
            echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
            echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
            exit;
        }

        echo "Success: A proper connection to MySQL was made! The testdb database is great." . PHP_EOL;
        echo "<br/>";
        echo "Host information: " . mysqli_get_host_info($link) . PHP_EOL;
        echo "<br/>";

        $source = $_POST['source'];
        $destination = $_POST['destination'];
        $distance = $_POST['distance'];
        $duration = $_POST['duration'];
        if(isset($_POST['source']) && isset($_POST['destination']) && isset($_POST['distance']) && isset($_POST['duration']))
        {
            $sql="INSERT INTO trip(source,destination,distance,duration) VALUES('$source', '$destination', '$distance', '$duration')";
        }                                                                                                            
        $result = mysqli_query($link,$sql); 
        if($result) 
        {
            echo "Successfully updated database";
        } 
        else 
        { 
            die('Error: '.mysqli_error($link));
        } 
        mysqli_close($link);


?>

存储多个谷歌地图路线的距离和持续时间

0 个答案: