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


فهاد الدرس الأول من هاد السلسلة ديال html 5 géolocalisation غادي نشوفو كيفاش نقادو واحد المشروع بسيط لي كيمكن من عرض الموقع ديالك الحالي على شكل عنوان الدرس بسيط للمبتدئين غادي نخدمو بgoogle maps geocoding لي غادي يمكنا من إنجاز المشروع.

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


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


غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه where_am_i من بعد غادي تزيد فيه 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>Trouve Moi App</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="#">Mon adresse</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


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

                                      
                                        var watchId,startLat,startLong,start = 0;
window.onload = function(){
    if(navigator.geolocation){
        watchId =  navigator.geolocation.watchPosition(onSuccess,onError,{
            maximumAge : 60*1000,
            timeout : 5*60*1000,
            enableHighAccuracy:true
        });
    }else{
        document.getElementById("result").innerHTML = "<div class='alert alert-danger'>Géolocalisation indisponible</div>";
    }
}
function onSuccess(position){
    var currentLat = position.coords.latitude;
    var currentLon = position.coords.longitude;
    //obtenir les premieres valeurs de votre position parceque dans  watch position 
    //la position change dés que vous vous déplacez 
    if(start == 1){
        startLat = currentLat;
        startLong = currentLon;
        start = 0;
    }
    //utiliser geocoder class pour obtenir l'adresse
    var geoCoder = new google.maps.Geocoder();
    //utiliser votre position actuelle
    var latlong = new google.maps.LatLng(currentLat,currentLon);
    //obtenir votre adresse
    geoCoder.geocode({'location': latlong},function(results,status){
        if(status == google.maps.GeocoderStatus.OK){
                document.getElementById("result").innerHTML = "<span class='text-primary'>Votre adresse actuelle est : </span>" + "<span class='text-danger'>"+ results[0].formatted_address +"<span>";
        }else{
            alert("Erreur adresse introuvable");
        }
    });
        //interactive carte
    var mapOptions = {
        center : new google.maps.LatLng(currentLat,currentLon),
        zoom : 18,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("interactivemap"),mapOptions);
    //ajouter marker à notre carte
    var marker = new google.maps.Marker({
        position : latlong,
        map : map,
        animation : google.maps.Animation.DROP
    });
}
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-10 col-md-offset-2">
            <div class="lead" id="result"></div>
            <div id="interactivemap" style="width:600px;height:500px;" class="thumbnail"></div>
        </div>
    </div>
</div>
<?php include("includes/footer.php");?>
                                        
                                    

كلمات مفاتيح :