لديك حساب بالفعل؟ دخول
دخول  سجل الأن 
تحميل جزء من الصفحة دون اعادة تحميل كل الصفحة
السلام عليكم اخواني
واجهت مشكلة اوقفت عملي على مشروع تخرج
قمت بتصميم صفحة خرائط جوجل بالاعتماد عاى مراجع جوجل لكم المشكلة التي واحهتها هي اعادة تحديت محتويات الصفحة دون اعادة تحميلها
الفكرة هي اضهار المعلومات الموجودة على قاعدة البيانات و ضهورها على الخريطة دون اعادة تحميل الصفحة كاحداتيات النقطة التي سوف يتم اضهارها بالخريطة
لجلب المعلومات من قاعدة البيانات استخدمت سكربت 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 و واجهت مشاكل اما اختفاء الخريطة او يبقى الامر على حاله
مشروعي بين ايدكم و اتمنى المساعدة
تاريخ البداية: 30 / يناير / 2012 الساعة 0:11 اخر نشاط: 31 / يناير / 2012 الساعة 19:23 maps ajax js

جاري الآن فحص مشكلتك ....و إن شاء الله نستطيع المساعده
30 / يناير / 2012 الساعة 0:20

شكرا لك اخي و الله انا بحاجة لها لانه مشروع تخرج حتى ان احتجت لنسخة من قاعدة البيانات سوف تضعها لك هنا
30 / يناير / 2012 الساعة 0:29

لما تحوله الى xml الا يمكن قراءته مباشرة, من جهة أخرى على حسب ما أن تستخدم الجيكويري لكن هذا في حيث كان الغرض هو أنه مباشرة مع كتابة الاحداتيات يتم التحديث و يسمونها onkeyup
30 / يناير / 2012 الساعة 1:53

قاعدة البيانات و كل الملفات لتجربة السكربت
في انتضار مساعدتكم
http://www.mediafire.com/?k0o97n1ai57sxqr
30 / يناير / 2012 الساعة 16:2

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
منذ: 31 / يناير / 2012 الساعة 19:23

قمت بايجاد حل لكن غير كامل

اولا قمت بوضع هذه الاسطر داخل دالة جديدة هي 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
منذ: 30 / يناير / 2012 الساعة 15:3

صراحة المشكلة حيرتنى .. انا ازكر كنت تعاملت مع خرائط جوجل من سنتين وكانت قابلتنى وحلتها ولكن حاولت ان اتذكر ولم استطيع
30 / يناير / 2012 الساعة 17:34

شكرا اخي و لو امكن ابحت لي ولو قليلا عن اي حل اخر تجده يجدي
و شكرا على اهتمامك و جعلها الله في ميزان حسناتك
30 / يناير / 2012 الساعة 20:48

جرب التالي

<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
منذ: 30 / يناير / 2012 الساعة 1:59

فكرة جيدة ايضا :)
30 / يناير / 2012 الساعة 2:14

شكرا احي على ردكم و مجاولة مساعدتي
قمت بتجربة المتال لكن يتم تحديت الديف
ما اريده هو تحديت المعلومات وضعت السكربت كامل لكي تتعرف على كل ما اعتمدته عليه
احتاج لطلايقة تمكن الدالة الاخيرة من اعادة اخد المعلومات من الملف
و توزيع الناتج على الامتيلة الموجودة فوق
اتمنى ان لا اكون قد اكترت من التفاصيل
30 / يناير / 2012 الساعة 3:9

في انتضار اقتراحاتكم اخواني
30 / يناير / 2012 الساعة 13:21

غير الملف reload.php الى اسم الملف الذي تقرأ البيانات منه
30 / يناير / 2012 الساعة 19:36

و على ما أعتقد هكذا سيتم تحديث الملف الذي تتم القراءة منه و الديف في نفس الوقت
30 / يناير / 2012 الساعة 19:38

لا يعمل اخي
يقوم بتحديت الديف فقط
شاهد الحل الدي وضعته فوق ادا امكن المساعدة هو بعد ان قمت بتحديت الفونكسيون الخاصة بالكتابة تقوم بكتابة في الخريطة واحد فوق الاخر
30 / يناير / 2012 الساعة 20:47

شكرا لكم اخواني على الردود و مساعدتكم
جعلها الله في ميزان حسناتكم
استعملت ملف JSON و الحمدد لله اشتغلق بشكل عادي
شكرا اخواني
30 / يناير / 2012 الساعة 23:46

الحمد لله يا ريث تضع الحل الذي نجح معك في اجابة هنا حتى يبقى الموضوع مفيد لمن سيأتي لاحقاً للموضوع و بالتوفيق اخي
31 / يناير / 2012 الساعة 12:53

أنشر اجابتك

xهل تريد الاجابة عن هذا السؤال؟ من فضلك سجل دخول او اشترك لتتمكن من الاجابة