application كتحسب المسافة بين المدن ب html & css & javascript


فهاد الدرس الجديد من سلسلة javascript غادي نشوفو كيفاش نقادو واحد ل application كتحسب المسافة مابين المدن المستخدم كيدخل المدينة ديال الإنطلاق وديال الوصول وكتعطاه المسافة والtrajet فالخريطة بالإضافة للوقت.

نظرة سريعة بالفيديو

1- الملف index.php

أول حاجة غاددي تزيد مشروع جديد ف wamp/www أو xampp/htdocs سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.php و style.css و script.js من بعد فتحو فlocalhost من بعد غادي تمشي للملف index.php غادي تزيد فيه الكود لي فيه الفورم لي كتمكن المستخدم باش يدخل المدينة ديال الإنطلاق وديال الوصول منبعد كيكليكي على ل bouton calculer لي كتنفد ل fonction calDistance لي غادي نزيدوها من بعد فالملف script.js  منبعد عندنا جوج ديال les div وحدة بل id map غادي تكون فيها الخريطة ووحدة  بل id result غادي تكون فيها النتيجة الكود ديال الملف هو :

                                <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
        <div class="row" align="center">
            <div class="col-md-8 col-md-offset-3">
                <h1 class="text-left">Calculer les distances</h1>    
                <p class="text-left">Calculateur de distance kilométrique entre villes du monde</p>
            </div>    
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-3">
                <form action="" class="form-horizontal">
                    <div class="form-group">
                        <label for="">Départ</laabel>
                        <input type="text" class="form-control col-md-12" name="" id="from" placeholder="Départ">
                    </div>
                    <div class="form-group">
                        <label for="">Arrivée</laabel>
                        <input type="text" class="form-control col-md-12" name="" id="to" placeholder="Arrivée">
                    </div>
                </form>
                <div class="form-group">
                    <button class="btn btn-info" onclick="calcDistance();">Calculer distance</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div id="map">

                </div>
                <div id="result">

                </div>
            </div>    
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=votre clé&libraries=places"></script>
    <script src="script.js"></script>
    </body>
</html>
                            

2- الملف style.css

فيه غادي يكونوا les styles ديالنا لي غادي يديرونا واحد l'image فل background و البقية ديال الفورم و les divs فين غادي تكون ل map و resultat الكود ديال الملف هو:

                                /**body style**/

body {
    background: url('road-2517227_1920.jpg') center center fixed;
    background-size: cover;
    color: #FFF;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/**div container style**/

.container {
    margin-top: 10px;
}


/**form style**/

form {
    align-content: center;
    margin-top: 30px;
    margin-left: 15px;
}


/**div with map id style**/

#map {
    width: 100%;
    height: 300px;
    border: 1px solid #000;
}


/**div with result id style**/

#result {
    margin-top: 5px;
    margin-bottom: 20px;
    width: 100%;
    height: 200px;
}


/**div with result class style**/

.result {
    background-color: #FFF;
    padding: 20px;
}
                            

3- الملف script.js

فاول حاجة باش تخدم بغوغل maps كتمشي ل هنا منبعد غادي تمشي ل obtenir une clé منبعد créer projet سميه لي بغيتي activer ل api وغادي
تاخد ل clé ديالك وتزيدها فالرابط لي فالملف index.php فين راني كاتب votre clé من بعد فالملف script.js غادي نزيدو أول الكود لي كيمكن من إضافة الخريطة ولي غادي تكون ف div لي عندها ل id map منبعد كنديكلاري directionService لي كياخد request لي فيها مدينة الإنطلاق والوصول لي دخل المستخدم فالفورم زائد شنو ل mode ديال السفر هنا حددنا السيارة وكيعطينا النتيجة  منبعد مكيرسم trajet على الخريطة وغادي تكون ف response فيها المعلومات الخاصين بالمسافة والتوقيت و مدينة الإنطلاق والوصول لي كيتعرضوا ف div لي عندها ل id result ويلا كانت النتيجة سلبية كنعرض رسالة كتقول بلي حتى نتيجة متلقات وفالأخير كاين الكود لي كيزيد autocomplete للحقول ديالنا الكود ديال الملف هو :

                                //set the map on div map
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: { lat: 34.0132500, lng: -6.8325500 },
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService;
// Create a renderer for directions and bind it to the map.
var directionsDisplay = new google.maps.DirectionsRenderer(map);
//calculate distance
function calcDistance() {
    //draw the direction
    var poly = new google.maps.Polyline({ strokeColor: "#2518DD", strokeWeight: 4 });
    //set from and to values and travel mode
    var request = {
        origin: document.getElementById("from").value,
        destination: document.getElementById("to").value,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    //send request
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            new google.maps.DirectionsRenderer({
                map: map,
                polylineOptions: poly,
                directions: response
            });
            $('#result').html('<div class="result"><span class="text-danger">Départ :</span><span class="text-info"> ' + document.getElementById("from").value + '</span><br><span class="text-danger">Arrivée :</span><span class="text-info"> ' + document.getElementById("to").value + '</span><br><span class="text-danger">Distance :</span><span class="text-info"> ' + response.routes[0].legs[0].distance.text + '</span><br><span class="text-danger">Durée :</span><span class="text-info"> ' + response.routes[0].legs[0].duration.text + '</span></div>');
        } else {
            //delete all routes
            directionsDisplay.setDirections({ routes: [] });
            map.setCenter(map.center);
            $('#result').html('<div class="alert alert-danger">Aucune donnée trouvée</div>');
        }
    });

}
//add autocomplete to inputs
var from = document.getElementById("from");
var to = document.getElementById("to");
var options = {
    types: ['(cities)']
}
var autocomplete1 = new google.maps.places.Autocomplete(from, options);
var autocomplete1 = new google.maps.places.Autocomplete(to, options);
                            


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد