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

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


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

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

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

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

                                //header.php code

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Stock Finder 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="#">Je cherche un stock</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 code

<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>
                            

-إنشاء قاعدة البيانات

من بعد كانمشي لphpmyadmin كنزيد فيه قاعدة بيانات جديدة كنسميها geolocation وداخل قاعدة البيانات كنزيد جدول كنسميه adresses لي فيه المعلومات الخاصة بكل مخزن العنوان بالإضافة للمدينة والإحداثيات الكود باش تصاوب الجدول هو :

                                CREATE TABLE IF NOT EXISTS `adresses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `addr` varchar(255) NOT NULL,
  `lat` varchar(255) NOT NULL,
  `long` varchar(255) NOT NULL,
  `zip` int(11) NOT NULL,
  `county` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

                            

- ملف الإتصال بقاعدة البيانات

فالمجلد الرئيسي ديال المشروع ديالنا كنزيد جوج ملفات واحد كنسميه database.php كيمكن من الإتصال بقاعدة البيانات و آخر كتسميه get_from_db.php لي كيمكن من جلب البيانات من قاعدة البيانات بالإعتماد على المدينة أو العنوان لي اختارو المستخدم الكود ديال الملفين هو :

                                //database.php code

<?php
$DB_HOST = "localhost";
$DB_USER = "root";
$DB_PASS = "";
$DB_DATABASE = "geolocation";

$con = mysqli_connect($DB_HOST,$DB_USER,$DB_PASS,$DB_DATABASE);

//get_from_db.php

<?php 
include("database.php");
$ville = $_REQUEST['ville'];
$query = "SELECT * FROM adresses WHERE county = '$ville'";
$result = mysqli_query($con,$query);
$output = "";
if($result != null){
    while($row = $result->fetch_assoc()){
        $output.= $row['lat']. ":" .$row['long']. ":" .$row['name']. ":" .$row['addr']."</br>";
    }
    echo $output;
}
?>
                            

- الملف script.php

في حالة مكانش عندك ل clé أول حاجة غادي تمشي https://developers.google.com/maps/documentation/javascript/get-api-key باش تسجل وتاخد واحد clé خاصة بك بها باش غادي تمكن من إستخدام خرائط google وداك ل clé غادي تزيدها فالملف footer.php فالرابط ديال الملف script.js لي فيه الكود ديالنا فكنديكلاريو لvariables لي غادي يمكنو من حفظ الإحداثيات ديال المستخدم والإحداثيات ديال المخزن لي مسجلين عندنا فقاعدة البيانات بالإضافة للمدينة والعنوان منبعد كنتحقق من أن المتصفح ديالي كيدعم geolocation لي يلا كان كيدعمها كتنفد لfonction onSuccess فيها كيتم رسم المسار فاتجاه المخزن ومنبعد كنفد function measureDistance لي كتحسب المسافة ما بين موقع المستخدم والعنوان لي اختار وكتعرض المسافة بالكيلومتر والمدة بالساعات والدقائق منبعد كاين function getCityStocks لي كتعرض المخازن لي كاينين فمدينة دخلها المستخدم ومنبعد كنفد function drawMap لي كترسم الخريطة ومنبعد كنفد function drawMarker لي كتزيد لmarkers فوق الخريطة لي كايبينو بوضوح المواقع أما ل function getAdresseStocks فهي كتقوم بنفس المهمة فقط بإستعمال العنوان الكود ديال الملف:

                                    var map;
var latlngbounds;
var currentLat;
var currentLong;
var destLat;
var destLong;
var place;
var address;
function findPath(){
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(onSuccess,onError,{
        maximumAge : 60*1000,
        timeout : 5*60*1000,
        enableHighAccuracy:true
    });
}else{
    document.getElementById("map").innerHTML = "<div class='alert alert-danger'>Votre navigateur ne supporte pas html 5 géolocalisation</div>";
}
}
function onSuccess(position){
currentLat = position.coords.latitude;
currentLong = position.coords.longitude; 
if(destLat != null && destLong != null){
    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(currentLat,currentLong),
        destination : new google.maps.LatLng(destLat,destLong),
        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
            });
        }
    });
    measureDistance();
}else{
        alert("Aucune donnée trouvée");
}
}
function measureDistance(){
var service = new google.maps.DistanceMatrixService; 
var origin1 = new google.maps.LatLng(currentLat,currentLong);
var destinationA = new google.maps.LatLng(destLat,destLong);
var request = {
    origins: [origin1],
    destinations: [destinationA],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
};
//alert(origin1);
service.getDistanceMatrix(request,function(response,status){
    if (status !== google.maps.DistanceMatrixStatus.OK) {
            alert('Erreur :' + status);
    }else{
        var results = response.rows[0].elements;
        var distance = results[0].distance.text;
        var duration = results[0].duration.text;
        document.getElementById("distDur").innerHTML = "<b class='text-danger'>Distance : </b><span class='text-primary'>"+ distance + "</span><b  class='text-danger'> | durée : </b><span class='text-primary'>" + duration +"</span>";
    }
});
}
function getCityStocks(){
var ville = document.getElementById("ville").value;
if(ville == "default"){
    alert("Veuillez choisir une ville");
}else{
    var xmlHttpRequest = new XMLHttpRequest();
    var url = "http://localhost/html5_geolocation/save_location_app/get_from_db.php?ville="+ ville;
    xmlHttpRequest.open("GET",url,false);
    xmlHttpRequest.send();
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        var result = xmlHttpRequest.responseText;
        drawMap(result);
    }else{
        alert("Aucune donnée trouvée");
    }
}
}
function drawMap(result){
var arr = result.split("</br>");
//console.log(arr);
var center = arr[0].split(":");
//console.log(center);
var latitude = center[0];
//console.log(latitude);
var longitude = center[1];
//console.log(longitude);
var position = new google.maps.LatLng(latitude,longitude);
var mapOptions =  {
        center : position,
        zoom : 11,
        mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),mapOptions);
latlngbounds = new google.maps.LatLngBounds();
for(var i=0;i<arr.length-1;i++){
    var store = arr[i];
    drawMarker(store);
}
map.fitBounds(latlngbounds);
}
function drawMarker(store){
var position = store.split(":");
var location = new google.maps.LatLng(position[0],position[1]);
var marker = new google.maps.Marker({
    position:location,
    map:map
});
latlngbounds.extend(marker.position);
var myInfoWindow = new google.maps.InfoWindow({
    content : "<b>Stock :</b>" + position[2] + "</br>" + "<b>Adresse :</b>" + position[3]
});
google.maps.event.addListener(marker,'click',function(){
    myInfoWindow.open(map,marker);
}); 
}
function getAdresseStocks(){
address = document.getElementById("adress").value;
if(address == "default"){
    alert("Veuillez choisir une adresse");
}else{
    var xmlHttpRequest = new XMLHttpRequest();
    var url = "https://maps.googleapis.com/maps/api/geocode/json?address=" + address +"&key=AIzaSyCyv8BI7_-BjCLZdfCiEaCvADQWFU9dt7Q";
    xmlHttpRequest.open("GET",url,false);
    xmlHttpRequest.send();
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var result  = xmlHttpRequest.responseText;
            var resultInfo = eval("("+ result +")");
            //console.log(resultInfo);
            destLat = resultInfo.results[0].geometry.location.lat;
            destLong = resultInfo.results[0].geometry.location.lng;
            var location = new google.maps.LatLng(destLat,destLong);
            var mapOptions = {
            center : new google.maps.LatLng(destLat,destLong),
            zoom : 18,
            mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"),mapOptions);
            var marker = new google.maps.Marker({
            position:location,
            map:map
            });
            //latlngbounds.extend(marker.position);
            var myInfoWindow = new google.maps.InfoWindow({
                content : "<b>Adresse :</b>" + address
            });
            google.maps.event.addListener(marker,'click',function(){
                myInfoWindow.open(map,marker);
            }); 
    }else{
        alert("Aucune donnée trouvée");
    }
    }
}
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");?>
<?php include("database.php");?>
<?php 
$query = "SELECT DISTINCT county FROM adresses";
$result = mysqli_query($con,$query);
$query_addr = "SELECT * FROM adresses";
$result_addr = mysqli_query($con,$query_addr);
?>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <fieldset style="width:300px">
                <legend class="text-info"><b>Recherche par ville</b></legend>
                <div class="form-group">
                    <label for="ville" class="text-success">Ville :</label>
                    <select name="ville" id="ville" onchange="getCityStocks();" class="form-control">
                        <option value="default">Veuillez choisir une ville</option>
                        <?php while($row = $result->fetch_assoc()):?>
                            <option value="<?php echo $row['county'];?>"><?php echo $row['county'];?></option>
                        <?php endwhile;?>
                    </select>
                </div>
            </fieldset>
            <h4 class="text-info">Ou</h4>
            <fieldset style="width:350px">
                <legend class="text-info"><b>Recherche par adresse</b></legend>
                <label for="adress" class="text-success">Adresse :</label>
                <div class="form-group">
                    <select name="adress" id="adress" onchange="getAdresseStocks();" class="form-control">
                        <option value="default">Veuillez choisir une adresse</option>
                        <?php while($row = $result_addr->fetch_assoc()):?>
                            <option value="<?php echo $row['addr'];?>"><?php echo $row['addr'];?></option>
                        <?php endwhile;?>
                    </select>
                </div>
                <div class="form-group">
                    <input type="button" name="find" id="find" class="btn btn-default" value="Atteindre" onclick="findPath();">
                </div>
            </fieldset>
            <p id="distDur"></p>
            <br>
            <fieldset style="width:600px;height:400px;">
                <div class="thumbnail" id="map" style="width:600px;height:400px;"></div>
            </fieldset>
        </div>
    </div>
</div>
<?php include("includes/footer.php");?> 
                                


بحث في الموقع


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