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


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

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

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

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه html_geolocation من بعد غادي تزيد فيه 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>Position tracker 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="#">Position tracker</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 لي كيتضمن الكود لي كيمكن من عرض الإحداثيات ديالنا اولا كنتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess لي كنسترجع بها الإحداثيات ديالي وكنعرضها منبعد كنديكلاري واحد لobjet لي كيتضمن خصائص الخريطة لي غادي تعرض وكنحدد فأي بلاصة غادي تكون الخريطة باستعمال لid ومنبعد كنديكلاري objet خور لي غادي يمكني من إضافة واحد لmarker للخريطة لي كيوضح فين أنا بالضبط وأخيرا كنديكلاري objet خور لي غادي يمكني من عرض واحد الرسالة بعد الضغط على لmarker الكود ديال الملف هو :

                                var watchId;
function startTrackingPosition(){
    if(navigator.geolocation){
        watchId = navigator.geolocation.watchPosition(successPosition);
    }else{
        document.getElementById("result").innerHtml = "Votre navigateur ne supporte pas la gélocalisation!!!";
    }
    }
    function stopWatchingPosition(){
       navigator.geolocation.clearWatch(watchId);
    }
    function successPosition(position){
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        document.getElementById("result").innerHTML = "<p class='alert alert-info'>Votre latitude est: "+ lat + "</p><br/><p class='alert alert-info'>Votre longitude est:" + long +"</p>";

        /*
        alert("Accuracy :"+ position.coords.accuracy);
        alert("Altitude :"+ position.coords.altitude);
        alert("Altitude Accuracy :"+ position.coords.altitudeAccuracy);
        alert("Direction :"+ position.coords.heading);
        alert("Speed :"+ position.coords.speed);
        alert("Time :"+ position.timestamp);
        */
        //static map
        //var mapUrl = "https://maps.googleapis.com/maps/api/staticmap?center="+ lat + "," + long + "&size=640x500&zoom=15&maptype=satellite&key=AIzaSyCQ18hFFmIPXx2l1WTwfkSTMCvvz7jS8lQ";
        //document.getElementById("staticmap").innerHTML = "<img src='"+mapUrl+"'>";
        //interactive map
        var mapOptions = {
            center : new google.maps.LatLng(lat,long),
            zoom : 18,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("interactivemap"),mapOptions);
        //add marker to the interactive map
        var marker = new google.maps.Marker({
            position : new google.maps.LatLng(lat,long),
            map : map,
            title : "Ma position",
            animation : google.maps.Animation.DROP
        });
        //add info window to the marker
        var info = new google.maps.InfoWindow({
            content : "Ma position actuelle"
        });
        //info.open(map,marker);
        google.maps.event.addListener(marker,"click",function(){
            info.open(map,marker);  
        });
    }
                            

- الملف index.php

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

                                    <?php include("includes/header.php");?>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div id="result"></div>
            <div class="form-group">
                <button class="btn btn-default" onclick="startTrackingPosition();">Start tracking</button>
                <button class="btn btn-default" onclick="stopWatchingPosition();">Stop tracking</button>
            </div>
            <div id="staticmap"> 
            </div>
            <div id="interactivemap" style="width:600px;height:300px" class="thumbnail">
            </div>
        </div>
    </div>
</div>
<?php include("includes/footer.php");?>
                                


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

بحث في الموقع


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