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

imadbelasri Html
HC

فهاد الدرس الأول من هاد السلسلة ديال 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");?>
                                                        
                                                    

دروس ذات صلة

HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الاول

فهاد الدرس غادي نشوفو كيفاش نقادو الواجهة ديال موقع للتواصل الإجتماعي على شكل فيسبوك بإستعمال Html...


HC

كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نكملو باقي الصفحات لي هي الصفحة الرئيسية و الصفحات لي غادي تضم...


HC

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

فهاد الدرس الأول من هاد السلسلة ديال html 5 géolocalisation غادي نشوفو كيفاش نقادو واحد المشروع بسيط...


HC

كيفاش تعرض الإحداثيات بإستعمال Html5 géolocalisation

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


HC

كيفاش تعرض حالة الطقس بإستعمال Html5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نقادو واحد المشروع لي كيمكن من عرض حالة الطقس فالموقع لي...


HC

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

فهاد الدرس من هاد السلسلة غادي نشوفو كيفاش نقادو واحد المشروع لي كيمكن من عرض الرمز البريدي ديال الع...


HC

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

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


HC

كيفاش تعرض معلومات على الخريطة بإستعمال Html 5 géolocalisation

فهاد الدرس من هاد السلسلة غادي نشوفو واحد المشروع لي كيمكن المستخدم من أنه يبحث على شي حاجة بغاها مث...


HC

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

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


HC

موقع للمبتدئين بل Html و Css

فهاد الدرس الجديد من موقع للمبتدئين بل Html و Css ولي عبارة عن Template بسيطة للمبتدئين فيها صفحة و...