|
تحميل جزء من الصفحة دون اعادة تحميل كل الصفحة
السلام عليكم اخواني
واجهت مشكلة اوقفت عملي على مشروع تخرج قمت بتصميم صفحة خرائط جوجل بالاعتماد عاى مراجع جوجل لكم المشكلة التي واحهتها هي اعادة تحديت محتويات الصفحة دون اعادة تحميلها الفكرة هي اضهار المعلومات الموجودة على قاعدة البيانات و ضهورها على الخريطة دون اعادة تحميل الصفحة كاحداتيات النقطة التي سوف يتم اضهارها بالخريطة لجلب المعلومات من قاعدة البيانات استخدمت سكربت php تحويل المعلومات من قاعدة البيانات الى ملف XML و اضهاره في نفس الصفحة و الخريطة تقوم بقرائة المعلومات بشكل مباشر من الملف دون الحاجة الى العودة الى قاعدة البيانات لكن المشكل الدي واجهته هو عندما احدت اي شئ في قاعدة البيانات ان يتم تحديتها على الخريطة دون الحاجة الى اعادة تحميل الصفحة و بصراحة لم اكتب لك هده الاسطر حتى بحت بتلات لغات و لم اجد اي شئ سوف اضع السكربت الدي اشتغات به بشكل كامل و اتمنى من الله ان اجد من يساعدني سكربت PHP الدي يحول المعلومات من قاعدة البيانات الى ملف XML $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);
}
};
الدالة التالتة
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[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute("titre"),markers[i].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[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute("titre"),markers[i].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>
محتوى قاعدة البيانات -- -------------------------------------------------------- -- -- Structure de la table `poi` -- CREATE TABLE IF NOT EXISTS `poi` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `titre` varchar(100) NOT NULL, `latitud` double NOT NULL, `longitude` double NOT NULL, `description` text NOT NULL, UNIQUE KEY `id` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ; -- -- Contenu de la table `poi` -- INSERT INTO `poi` (`id`, `titre`, `latitud`, `longitude`, `description`) VALUES (6, 'Pointeur1', 31.62730153, -8.02582467, 'Nom:AZZEddine???\r\nquartier : massira\r\nville : marrakech\r\npays : Maroc'), (7, 'Pointeur2', 31.6, -8.216667, 'Nom:Tarik\r\nprenom : lodi \r\nquartier : bou Azza\r\nville : marrakech\r\npays : Maroc\r\n'), (8, 'Pointeur3', 31.586, -8.495956999999976, 'Nom:Tarik\r\nprenom : lodi \r\nquartier : Mzouda\r\nville : marrakech\r\npays : Maroc\r\n'), (9, 'Pointeur4', 31.7518068, -8.106551599999, 'Nom:Tarik\r\nprenom : mohammed\r\nquartier : tamnsourt\r\nville : marrakech\r\npays : Maroc\r\n'), (10, 'Pointeur5', 31.666667, -7.85, 'Nom:ali\r\nprenom : lodi \r\nquartier : assakane\r\nville : marrakech\r\npays : Maroc\r\n'); -- -------------------------------------------------------- -- -- Structure de la table `poi2` -- CREATE TABLE IF NOT EXISTS `poi2` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `titre` varchar(100) NOT NULL, `latitud` double NOT NULL, `longitude` double NOT NULL, `description` text NOT NULL, UNIQUE KEY `id` (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; -- -- Contenu de la table `poi2` -- INSERT INTO `poi2` (`id`, `titre`, `latitud`, `longitude`, `description`) VALUES (6, 'Pointeur2', 30, -8.02582467, 'Nom:AZZEddine\r\nprenom : lodi \r\nquartier : massira\r\nville : marrakech\r\npays : Maroc'); -- -------------------------------------------------------- -- -- Structure de la table `student` -- CREATE TABLE IF NOT EXISTS `student` ( `student_no` int(11) NOT NULL AUTO_INCREMENT, `student_name` varchar(200) NOT NULL, `student_address` varchar(200) NOT NULL, `student_brithday` varchar(200) NOT NULL, `student_telephon` varchar(200) NOT NULL, PRIMARY KEY (`student_no`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; -- -- Contenu de la table `student` -- INSERT INTO `student` (`student_no`, `student_name`, `student_address`, `student_brithday`, `student_telephon`) VALUES (1, 'azzedine', 'lodi', 'dimi', 'marrakech'), (2, 'tarik', 'lodimi', 'casa', '05552155215'), (3, 'ahmed', 'lodika', 'mkech', '052155224154'), (4, 'khalidl', 'laadimi', 'tetouane', '05665251552'), (5, 'wahran', 'algerie', 'maroc', '0235155215'); وضعت السكربت بين ايديكم اتمنى ان تساعدوني مع العلم اني استخدمت الدالة setInterval و واجهت مشاكل اما اختفاء الخريطة او يبقى الامر على حاله مشروعي بين ايدكم و اتمنى المساعدة
3 إجابات
شكرا للاخوة الدي ساعدوني بردودهم الحل هو انني انشات ملف ب php يحول معلومات الى ملف JSON
وقمت بالمنادات على الدوال ب javascript
function createMarker(marker_id, marker_data)
{
// init the marker and add it to the map
//propriete de icon
var icon = marker_data.images ;
var imageMarqueur = new google.maps.MarkerImage(icon, new google.maps.Size(32, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32));
//ombre de icon
var ombreMarqueur = new google.maps.MarkerImage('images/msmarker.shadow.png', new google.maps.Size(40, 32), new google.maps.Point(0,0), new google.maps.Point(16, 32));
var latlng = new google.maps.LatLng(marker_data.lat, marker_data.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: imageMarqueur, //icon
shadow: ombreMarqueur, //ombre de icon
title: marker_data.titre
});
var logo = marker_data.logo;
var h1 = '<H1>' + marker_data.titre + '</h1>';
var codimg1 = '<img id=\"lettrineImage\" src=\"' + logo + '\" />';
var des = '<p>'+marker_data.description + '</p>';
// create info window
var infobulle = new google.maps.InfoWindow({
content: h1+codimg1+des ,
maxWidth: 25,
maxheight:20
});
// add click even to the marker
google.maps.event.addListener(marker, "click", function() {
infobulle.open(map, marker);
function codeLatLng( lat, lng, where) {
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status){
// element ou l'on va ecrire
var oElem = document.getElementById( where);
// action suivant resultat
if( status == google.maps.GeocoderStatus.OK) {
var str = results[0].formatted_address;
oElem.innerHTML = str;
}
else{
oElem.innerHTML = "Geocoder failed due to: " + status;
}
});
}
// appel des fonctions
var posi = codeLatLng( marker_data.lat, marker_data.lng, "depart");
document.getElementById("demo").innerHTML=marker_data.titre;
});
google.maps.event.addListener(map, "click", function() {
infobulle.close();
});
// add the marker to the store array
markers_store[marker_id] = marker;
// add the marker (id/hash) to the list array
markers_list[marker_id] = marker_data.hash;
console.log("marker " + marker_id + " added");
}
function deleteMarker(marker_id)
{
// remove from Map
markers_store[marker_id].setMap(null);
// destroy the marker object
markers_store[marker_id] = null;
//delete from markers store
delete markers_store[marker_id];
// delete from markers list
delete markers_list[marker_id];
console.log("marker "+ marker_id +" deleted")
}
//holds the id & the hash of the marker
var markers_list = new Array();
// holds the markers itself
var markers_store = new Array();
function start()
{
// AJAX request to PHP page and recieve json encoded data
$.getJSON("position-bd.php", function(data){
$.each(data, function(key, val) {
// check if marker exists already
if ((key) in markers_list) {
console.log("marker " + key + " exists");
// check if marker's data not modified in DB
if (markers_list[key] != val.hash) {
console.log("but it's modified");
// Delete old marker
deleteMarker(key);
// Add the new marker
createMarker(key, val);
}
} else {
createMarker(key, val);
}
});
//check for deleted marker on DB
for (var d in markers_list) {
if (data[d] == undefined) {
console.log(d + " is to be removed");
deleteMarker(d);
}
}
});
}
function initialize_map()
{
var latlng = new google.maps.LatLng(31.633214, -8.009033);
var myOptions = {
zoom: 10,
center: latlng,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
start();
setInterval("start()", 1000);
}
و قمت بالمنادات عليه ب html و الحمد لله حل المشكل شكرا جزيلا بواسطة: azzedine 1 من 1 أشخاص وجدو هذه الاجابة مفيدة. هل وجدتها؟ نعم لا
قمت بايجاد حل لكن غير كامل
اولا قمت بوضع هذه الاسطر داخل دالة جديدة هي start function start() {
downloadUrl("position-bd.php", function(data) {
console.log("start");
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
createMarker(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")),
markers[i].getAttribute("titre"),
markers[i].getAttribute("description"));
//setInterval(createMarker, 2000); // مسحت هذا السطر
}
});
}
ومن تم نضع مؤقت في نهاية الدالة initialize يستدعي الدالة start مثلا كل 10 ثوان
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);
start();
timer = setInterval("start()", 10000);
}المشكل انه في كل مرة يتم رسم الـ marker فوق بعضها بعضا هل من حل في كل مرة تتغير mraker لايتم وضعها كلها بل مسح التي قبل تم رسم marker جديد و هكدا بواسطة: azzedine 1 من 1 أشخاص وجدو هذه الاجابة مفيدة. هل وجدتها؟ نعم لا صراحة المشكلة حيرتنى .. انا ازكر كنت تعاملت مع خرائط جوجل من سنتين وكانت قابلتنى وحلتها ولكن حاولت ان اتذكر ولم استطيع شكرا اخي و لو امكن ابحت لي ولو قليلا عن اي حل اخر تجده يجدي
جرب التالي
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
var auto_refresh = setInterval(
function()
{
$('#loaddiv').fadeOut('slow').load('reload.php').fadeIn("slow");
}, 20000);
</script>
سيتم عمل تحديث فقط للديف
<div id="loaddiv"> </div> بالنسبة للملف reload.php هو الملف الذي ستتم قراءة البيانات منه ان شاء الله ينجح هذا بواسطة: Imad 2 من 2 أشخاص وجدو هذه الاجابة مفيدة. هل وجدتها؟ نعم لا فكرة جيدة ايضا :) شكرا احي على ردكم و مجاولة مساعدتي في انتضار اقتراحاتكم اخواني غير الملف reload.php الى اسم الملف الذي تقرأ البيانات منه و على ما أعتقد هكذا سيتم تحديث الملف الذي تتم القراءة منه و الديف في نفس الوقت لا يعمل اخي شكرا لكم اخواني على الردود و مساعدتكم الحمد لله يا ريث تضع الحل الذي نجح معك في اجابة هنا حتى يبقى الموضوع مفيد لمن سيأتي لاحقاً للموضوع و بالتوفيق اخي |
إحصاءات 'azzedine'
الأسئلة : 3
الإجابات : 8 التعليقات : 10 قد يهمك أيضًا
|
تابع AWCORE
- تابعنا:
- المعرض | المنتجات | برمجة خاصة
جاري الآن فحص مشكلتك ....و إن شاء الله نستطيع المساعده
30 / يناير / 2012 الساعة 0:20
شكرا لك اخي و الله انا بحاجة لها لانه مشروع تخرج حتى ان احتجت لنسخة من قاعدة البيانات سوف تضعها لك هنا
30 / يناير / 2012 الساعة 0:29
لما تحوله الى xml الا يمكن قراءته مباشرة, من جهة أخرى على حسب ما أن تستخدم الجيكويري لكن هذا في حيث كان الغرض هو أنه مباشرة مع كتابة الاحداتيات يتم التحديث و يسمونها onkeyup
30 / يناير / 2012 الساعة 1:53
قاعدة البيانات و كل الملفات لتجربة السكربت
في انتضار مساعدتكم
http://www.mediafire.com/?k0o97n1ai57sxqr
30 / يناير / 2012 الساعة 16:2