كيفاش ترسم مسار بإستعمال Html 5 géolocalisation

كيفاش ترسم مسار بإستعمال Html 5 géolocalisation


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

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

- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه how_to_reach من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php فincludes الملف header.php الكود ديالو هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Trajet Finder</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Trouves Moi Mon Trajet</a>
     <ul class="nav navbar-nav">
      <li class="active"><a href="index.php">Accueil <span class="sr-only"></span></a></li>
     </ul>
    </div>
</nav>
                            

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.

                                <script src="https://maps.googleapis.com/maps/api/js?key=Votre clé"></script>
<script src="js/script.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
                            

- الملف script.php

في حالة مكانش عندك ل clé أول حاجة غادي تمشي https://developers.google.com/maps/documentation/javascript/get-api-key باش تسجل وتاخد واحد clé خاصة بك بها باش غادي تمكن من إستخدام خرائط google وداك ل clé غادي تزيدها فالملف footer.php فالرابط ديال الملف script.js لي فيه الكود ديالنا فكنديكلاريو واحد variable points لي عبارة عن جدول غادي نسجلو فيه الإحداثيات ديال المستخدم بالإضافة للإحداثيات ديال المدينة لي دخل المستخدم من بعد كنتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess فيها كيتسجلو الإحداثيات لي دكرنا وكنرسلو المدينة لي اختار المستخدم بإستعمال الرابط من بعد كنسترجعو المعلومات لي ردنا serveur على شكل json وكنسجلو إحداثيات المدينة لي دخل المستخدم فلجدول points منبعد كنديكلاري واحد لobjet لي كيتضمن خصائص الخريطة لي غادي تعرض وكنحدد فأي بلاصة غادي تكون الخريطة باستعمال لid ومنبعد كنديكلاري objet خور لي غادي يمكني من إضافة واحد لmarker للخريطة لي كيوضح فين المستخدم بالإضافة للمدينة لي باغي يوصلها وأخيرا كنفد لfonction drawPath لي غادي تمكن من رسم المسار على الخريطة الكود ديال الملف هو :

                                var points = [{},{}];
var map;
function findPath(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess,onError,{
            maximumAge : 60*1000,
            timeout : 5*60*1000,
            enableHighAccuracy:true
        });
    }else{
        document.getElementById("result").innerHTML = "Votre navigateur ne supporte pas html 5 géolocalisation";
    }
}
function onSuccess(position){
    points[0].lat = position.coords.latitude;
    points[0].long = position.coords.longitude; 
    var localAdress = document.getElementById("destination").value.replace(" ","+");
    var xmlHttpLatLongRequest = new XMLHttpRequest();
    var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + localAdress +"&key=AIzaSyCyv8BI7_-BjCLZdfCiEaCvADQWFU9dt7Q";
    xmlHttpLatLongRequest.open("GET",url,false);
    xmlHttpLatLongRequest.send();
    if(xmlHttpLatLongRequest.readyState == 4 && xmlHttpLatLongRequest.status == 200){
        var result  = xmlHttpLatLongRequest.responseText;
        var resultInfo = eval("("+ result +")");
        console.log(resultInfo);
        points[1].lat = resultInfo.results[0].geometry.location.lat;
        points[1].long = resultInfo.results[0].geometry.location.lng;
    }
    //interactive carte
    var mapOptions = {
        center : new google.maps.LatLng(points[0].lat,points[0].long),
        zoom : 18,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("result"),mapOptions);
    var latlngbounds = new google.maps.LatLngBounds();
    //ajouter le marker
    for(var i=0;i<points.length;i++){
        var marker = new google.maps.Marker({
            position:new google.maps.LatLng(points[i].lat,points[i].long),
            map:map
        });
        latlngbounds.extend(marker.position);
    }
    //montrer les deux points sur la carte
    map.fitBounds(latlngbounds);
    drawPath();
}
function drawPath(){
    var directionService = new google.maps.DirectionsService();
    //dessiner le trajet 
    var poly = new google.maps.Polyline({strokeColor:"#FF0000",strokeWeight:4});
    //declarer les points du départ et de la destination et le mode de voyage
    var request = {
        origin : new google.maps.LatLng(points[0].lat,points[0].long),
        destination : new google.maps.LatLng(points[1].lat,points[1].long),
        travelMode : google.maps.DirectionsTravelMode.DRIVING
    };
    //envoyer la requête
    directionService.route(request,function(response,status){
        if(status ==  google.maps.DirectionsStatus.OK){
            new google.maps.DirectionsRenderer({
                map:map,
                polylineOptions:poly,
                directions:response
            });
        }
    });

}
function onError(error){
    switch(error.code){
        case PERMISSION_DENIED :
            alert("Accés refusé pour l'utilisateur");
        break;
        case TIMEOUT :
            alert("Temps d'attente terminé");
        break;
        case POSITION_UNAVAILABLE :
            alert("Info de géolocalisation est Non-Disponible");
        break;
        default:
            alert("Erreur inconnu");
        break;
    }
}
                            

- الملف index.php

هادا الملف الرئيسي ديالنا لي غادي يتم فيه عرض المسار لي ما بين الموقع الحالي ديال المستخدم والمدينة لي دخل المستخدم الكود ديالو هو :

                                    <?php include("includes/header.php");?>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <fieldset style="width:500px;">
                    <legend class="text-info"><b>Trouver votre trajet</b></legend>
                    <div class="form-group">
                        <label for="destination">Destination : </label>
                        <input type="text" name="destination" id="destination" class="form-control">
                    </div>
                    <div class="form-group">
                        <button type="button"  onclick="findPath();" class="btn btn-default">Voir</button>
                    </div>
                </fieldset>
                <div id="result" class="thumbnail" style="width:600px;height:600px;">
                </div>
            </div>
        </div>
    </div>
<?php include("includes/footer.php");?>
                                


بحث في الموقع


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