个人中心
gpt4 book ai didi

javascript - 我怎样才能在我的页面中获得所有出行模式(如驾驶、公交、骑自行车、步行)的距离和持续时间，并将其存储在数据库中

转载 作者：行者123 更新时间：2023-11-29 21:05:23 27 4
gpt4 key购买 nike

我只成功地显示和存储了单一出行模式的数据，但现在我想存储所有出行模式的距离和持续时间等数据，这是代码，我需要执行哪些更改，提前致谢 映射器.html

<html>
<head>
    <title></title>
    <style type="text/css">
        body
        {
        font-family: Arial;
        font-size: 10pt;
        }
    </style>
</head>
<body>
    <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 routeArr = [];
        var directionsDisplay;                                                      // The whole map rendering or displaying.
        var globalResponse;
        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 =                        // variable 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)
        {
                    globalResponse = response;
                    routeArr = [];

                    for(i=0;i<globalResponse.routes.length;i++)
        { 

                        routeArr.push([globalResponse.routes[i].legs[0].distance.text, globalResponse.routes[i].legs[0].duration.text]);
                    }
                    var s = 'Possible routes are: <br />';
                    for(i = 0; i < routeArr.length; ++i)
        {

            routeArr[i][0] = routeArr[i][0].trim();
            routeArr[i][0] = routeArr[i][0].substring(0,routeArr[i][0].length-3)
            routeArr[i][1] = routeArr[i][1].split(' ');
            if(routeArr[i][1].length==2)
            {
                routeArr[i][1]=parseInt(routeArr[i][1][0]);
            }
            else
            {
                routeArr[i][1]=parseInt(routeArr[i][1][0])*60 + parseInt(routeArr[i][1][2]);
            }
                        s += "Distance: " + routeArr[i][0] + ", " + "Duration: " + routeArr[i][1] + "<br />";

                    }

                    document.getElementById("dvDistance").innerHTML = s;
                    directionsDisplay.setDirections(response);


                }

                // Here's the 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() {                           // here the function name that is designed to handle the response
                    if (httpRequest.readyState == 4 && httpRequest.status == 200) {          //200 OK response code. // 4 is complete response received
                        alert(httpRequest.responseText);
                    }
                };
                httpRequest.open("POST", "mapdb.php", true);       // here true means asynchronously server is called,i.e,without page reloading
                httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                httpRequest.send("source=" + source + "&destination=" + destination + "&sel=" + sel + "&i=" + i + "&routes=" + JSON.stringify(routeArr));

            });

            //-----------------------------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 = globalResponse.rows[0].elements[0].distance.text;    //  Distance Calculation From data provide by APIs
                    var duration = globalResponse.rows[0].elements[0].duration.text;      //  Duration Calculation From data provide by APIs
                    var distance = globalResponse.routes[0].legs[0].distance.text;
                    var duration = globalResponse.routes[0].legs[0].duration.text;
                    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;//+ " "+typeof response.routes.length;*/

                }else {
                    alert("Unable to find the distance via road.");
                }
            });
        var sel = document.getElementById('modes').value;                      // which mode the user is preferring

        }
    </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 id="modes">
                    <option value="driving" >Driving</option>
                    <option value="cycling">Cycling</option>
                    <option value="transit">Transit</option>
                    <option value="walking"selected>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>

 mapdb.php
<?php
if(isset($_POST['source'], $_POST['destination'], $_POST['sel'], $_POST['i']) && count($_POST['routes']))
{
    $routes_array = json_decode($_POST['routes'], true);

                                                    // Create connection
    $conn = new mysqli("localhost", "root", "", "testdb");
                                                    // Check connection
    if ($conn->connect_error) 
{
         die("Connection failed: " . $conn->connect_error);
    }

$i = $_POST['i'];
$sel = $_POST['sel'];
    $source = $_POST['source'];
    $destination = $_POST['destination'];
    $query = "INSERT INTO trip(source, destination, mode, num_routes) VALUES('{$source}', '{$destination}', '{$sel}', '{$i}')";
    if($conn->query($query)){

        $trip_id = $conn->insert_id;
        foreach($routes_array as $route){
            $distance = $route[0];
            $duration = $route[1];
            $query = "INSERT INTO route(trip_id, distance, duration) VALUES({$trip_id}, '{$distance}', '{$duration}')";  //distance in km and durtion
            $conn->query($query);
        }
        echo "Sumeet!!!Success";
    }
else
{
        echo "Something went wrong!!! Record couldn't be inserted";
    }

    // Close connection
    $conn->close();
}

?>

最佳答案

在您的请求中将“模式”更改为“步行”、“公交”、“骑自行车”。首先在浏览器上使用 google Direction API 端点检查输出。并非每对位置都提供步行和骑自行车结果。

附加 TravelMode 的最后一部分:google.maps.TravelMode.“在此处更改”。 enter link description here如果迭代(循环)不可能，则重复代码三次。

关于javascript - 我怎样才能在我的页面中获得所有出行模式(如驾驶、公交、骑自行车、步行)的距离和持续时间，并将其存储在数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36862326/

27 4 0
文章推荐： javascript - 使用 JS innerHTML 引入 Array[] 字段和
文章推荐： java - 制作多图安卓游戏，如何避免多图报java.lang.OutOfMemory错误
文章推荐： javascript - 如何使用 do 语法编写 switch 语句？
文章推荐： android - Robolectric 和 FragmentTestUtil
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com