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

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


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

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

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

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه find_around_me من بعد غادي تزيد فيه 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>Je cherche</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="#">Je Cherche App</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é&libraries=places"></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 لي فيه الكود ديالنا لي كيتضمن fonction drawMap كتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess فيها كيتسجلو الإحداثيات ديال المستخدم لي كيمكنو من عرض الموقع ديال المستخدم على الخريطة من بعد كاين function getLocation لي كتسترجع الإختيارات ديال المستخدم من بعد كترسلهم لfunction findPlaces لي كتمكن من البحث عن الإختيار ديال المستخدم فمثلا يلا المستخدم اختار مستشفى كتبحث على المستشفيات لي كاينين فداك الموقع من بعد function createMarks كتصاوب علامات ديال المستشفيات لي تلقاو بل function drawMarker لي كتعرضهم على الخريطة أما function clearMarkers فهي فقط كتمسح الإختيار القديم ديال المستخدم وتعرض الجديد الكود ديال الملف هو :

                                var myPosition;
var categorie;
var distance;
var map; 
var markerArray = new Array();
var i;
window.onload = function(){
    drawMap();
}
function drawMap(){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(onSuccess,onError,{
            maximumAge : 60*1000,
            timeout : 5*60*1000,
            enableHighAccuracy:true
        });
    }else{
        alert("Votre navigateur ne supporte pas html 5 géolocalisation");
    }
}
function onSuccess(position){
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    myPosition = new google.maps.LatLng(lat,long);
    var mapOptions = {
        center : myPosition,
        zoom:11,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"),mapOptions);
}
function getLocation(){
    categorie = document.getElementById("categorie").value;
    distance = document.getElementById("distance").value;
    if(categorie == "default"){
        alert("Veuillez choisir une catégorie");
    }else{
        findPlaces();
    }
}
function findPlaces(){
    var request = {
        location: myPosition,
        radius : distance,
        type :[categorie]
    };  
    var service = new google.maps.places.PlacesService(map);
    service.search(request,createMarks);
}
function createMarks(results,status){
    var latlngbounds = new google.maps.LatLngBounds();
    if(status == google.maps.places.PlacesServiceStatus.OK){
        clearMarkers();
        for(i=0;i<results.length;i++){
            var place = results[i];
            drawMarker(place);
            latlngbounds.extend(place.geometry.location);
        }
        map.fitBounds(latlngbounds);
    }else{
        alert("Aucune donnée trouvée!");
    }
}
function drawMarker(place){
    var marker = new google.maps.Marker({
        position : place.geometry.location,
        map:map
    });
    markerArray.push(marker);
    var myInfoWindow = new google.maps.InfoWindow({
        content : '<img src="'+ place.icon +'"/><font style="color:#000"'+ place.name + 
                    '</br>Adresse :'+ place.vicinity + '</font>'
    });
    google.maps.event.addListener(marker,'click',function(){
        myInfoWindow.open(map,marker);
    }); 
}
function clearMarkers(){
    if(markerArray){
        for(i in markerArray){
            markerArray[i].setMap(null);
        }
        markerArray = [];
    }
}
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");
                            

- الملف index.php

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

                                    <?php include("includes/header.php");?>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-3">
            <div class="row">
                <div class="col-md-5">
                <div class="">
                        <h4 class="text-primary">Je cherche</h4>
                        <div class="form-group">
                            <select name="" id="categorie" onChange="getLocation();" class="form-control"> 
                                <option value="default" selected>Veuillez choisir une catégorie</option>
                                <option value="hospital">Hôpitaux</option>
                                <option value="airport">Aéroport</option>
                                <option value="bank">Banques</option>
                                <option value="parking">Parking</option>
                                <option value="taxi_stand">Taxi</option>
                                <option value="hair_care">Coiffeur</option>
                                <option value="dentist">Dentiste</option>
                                <option value="pharmacy">Pharmacie</option>
                            </select>
                        </div>
                        <h4 class="text-primary">Dans</h4>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-8">
                                    <select name="" id="distance" onChange="getLocation();" class="form-control">
                                        <option value="500">500</option>
                                        <option value="1000">1000</option>
                                        <option value="2000">2000</option>
                                        <option value="25000">25000</option>
                                        <option value="50000">50000</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <span class="text-danger lead">Métres</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div id="map" class="thumbnail" style="width:600px;height:500px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include("includes/footer.php");?>
                                


بحث في الموقع


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