السلام عليكم اخواني
واجهت مشكلة اوقفت عملي على مشروع تخرج
قمت بتصميم صفحة خرائط جوجل بالاعتماد عاى مراجع جوجل لكم المشكلة التي واحهتها هي اعادة تحديت محتويات الصفحة دون اعادة تحميلها
الفكرة هي اضهار المعلومات الموجودة على قاعدة البيانات و ضهورها على الخريطة دون اعادة تحميل الصفحة كاحداتيات النقطة التي سوف يتم اضهارها بالخريطة
لجلب المعلومات من قاعدة البيانات استخدمت سكربت php تحويل المعلومات من قاعدة البيانات الى ملف XML و اضهاره في نفس الصفحة و الخريطة تقوم بقرائة المعلومات بشكل مباشر من الملف دون الحاجة الى العودة الى قاعدة البيانات
لكن المشكل الدي واجهته هو عندما احدت اي شئ في قاعدة البيانات ان يتم تحديتها على الخريطة دون الحاجة الى اعادة تحميل الصفحة و بصراحة لم اكتب لك هده الاسطر حتى بحت بتلات لغات و لم اجد اي شئ
سوف اضع السكربت الدي اشتغات به بشكل كامل و اتمنى من الله ان اجد من يساعدني
سكربت PHP الدي يحول المعلومات من قاعدة البيانات الى ملف XML
<?php
$user = "root";
$password = "";
$host = "localhost";
$bdd = "map";
mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur de connexion à la base de données");
$sql = "SELECT * FROM poi";
$res = mysql_query($sql) or die("erreur");
$dom = new DomDocument('1.0', 'iso-8859-1');
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
while ($result = mysql_fetch_array($res)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("titre", $result['titre']);
$newnode->setAttribute("lat", $result['latitud']);
$newnode->setAttribute("lng", $result['longitude']);
$newnode->setAttribute("description",utf8_encode($result['description']));
}
$xmlfile = $dom->saveXML();
echo $xmlfile;
?>الان الدوال التي اشتغلت بها
الدالة الاولى لفتح requête AJAX
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};الدالة التانية
الدالة التي تقوم بتحميل ملف xml
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
}
if (status == 200) {
callback(request.responseText, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open("GET", url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};الدالة التالتة
function xmlParse(str) {
if (typeof ActiveXObject != "undefined" && typeof GetObject != "undefined") {
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != "undefined") {
return (new DOMParser()).parseFromString(str, "text/xml");
}
return createElement("div", null);
}الدالة الرابعة
التي تقوم بوضع النقاط على الخريطة
function createMarker(lat, lng, titre, description){
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: titre
});
var infobulle = new google.maps.InfoWindow({
content: description
});
google.maps.event.addListener(marker, "click", function(){
infobulle.open(map, marker);
});
}الدالة الخامسة احداتات الخريطة لكن لا تحتاج الى اعادة تحميل لانها سوف تخلق مشكل
function initialize() {
var latlng = new google.maps.LatLng(31.633214, -8.009033);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}الدالة السادسة تقوم بانشاء النقط و اخط الاحداتيات من ملف XML
downloadUrl("position-bd.php", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
createMarker(parseFloat(markers.getAttribute("lat")),parseFloat(markers.getAttribute("lng")), markers.getAttribute("titre"),markers.getAttribute("description")),
setInterval(createMarker, 2000);
}
})كود صفحة هتمل بشكل كامل
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Carte Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}
request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
}
if (status == 200) {
callback(request.responseText, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open("GET", url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};
function xmlParse(str) {
if (typeof ActiveXObject != "undefined" && typeof GetObject != "undefined") {
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != "undefined") {
return (new DOMParser()).parseFromString(str, "text/xml");
}
return createElement("div", null);
}
function createMarker(lat, lng, titre, description){
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: titre
});
var infobulle = new google.maps.InfoWindow({
content: description
});
google.maps.event.addListener(marker, "click", function(){
infobulle.open(map, marker);
});
}
function initialize() {
var latlng = new google.maps.LatLng(31.633214, -8.009033);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
downloadUrl("position-bd.php", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
createMarker(parseFloat(markers.getAttribute("lat")),parseFloat(markers.getAttribute("lng")), markers.getAttribute("titre"),markers.getAttribute("description")),
setInterval(createMarker, 2000);
}
})
setInterval(function() {createMarker()}, 1000);
setInterval(function() {xmlParse(str)}, 1000);
setInterval(function() {downloadUrl()}, 1000);
setInterval(function() {createXmlHttpRequest()}, 1000);
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>وضعت السكربت بين ايديكم اتمنى ان تساعدوني
مع العلم اني استخدمت الدالة setInterval و واجهت مشاكل اما اختفاء الخريطة او يبقى الامر على حاله
مشروعي بين ايدكم و اتمنى المساعدة
