Discussion :

[heavens14]

Bon je vais essayé d'être claire pour que se soit assez rapide j'espère^^.

J'ai un projet dont le but est de récupérer les coordonné de longitude et latitude d'un véhicule et l'afficher sur un marqueur.
pour cela je n'ai pas de problème, cependant je préférai pouvoir voir mon marqueur se déplacer dans le googlemap sans avoir à rafraichir la l'api de google Map en entier.

donc j'ai créer un script php qui récupère la latitude et la longitude du véhicule en question "getpos2.php" :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$req7 = $bdd -> query('SELECT * FROM position where IdBus='.$Numbus) or die(print_r($bdd -> errorInfo()));
	$count = $req7 -> rowCount();
 
	//$i = 0;
	while ($donnee7 = $req7 -> fetch()) {
		//$stations[] = $donnee['Nom_de_la_station'];
		$Positionbus[] = array("IdBus" => $donnee7['IdBus'],"IdLigne" => $donnee7['IdLigne'],"IdChauffeur" => $donnee7['IdChauffeur'], "longitude" => $donnee7['Longitude'], "latitude" => $donnee7['Latitude']);
		//echo $donnee['Nom_de_la_station'];
	}
 
	//echo count($stations);
 
	$Pos4 = '{"item":' . json_encode($Positionbus) . '}';

puis dans ma page php voila le script qui récupère la map et génère les marqueurs de mes stations et également le marker2 qui représente le positionnement du bus :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
$(function() {
 
             var Pos = JSON.parse('<?php echo $Pos3 ?>');			
	     var obj = JSON.parse('<?php echo $msg ?>');
 
		var latlng = new google.maps.LatLng(32.31006000, -9.23662805);
		var map = new google.maps.Map(document.getElementById("Gmap"), {
 
								zoom : 12,
								center : latlng,
								mapTypeId : google.maps.MapTypeId.ROADMAP,
 
								});
 
			var i=0;
			while (i<obj.item.length){
						var marker = new google.maps.Marker({
						position : new google.maps.LatLng(obj.item[i].latitude, obj.item[i].longitude),
						map : map,
						title : obj.item[i].nom
								});
								i++;
								}
 
			var marker2 = new google.maps.Marker({
					position : new google.maps.LatLng(Pos.item[0].latitude, Pos.item[0].longitude),
				        map : map,
					title : 'BUS'
								});
 
                         movePositionMarker(marker2);
 
								});

Puis enfin la fonction movePostionMarker qui me pose problème, cette fonction est sensé mettre a jour régulièrement le positionnement du marker2 en passant par le script php plus haut. (maqueur du véhicule) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function movePositionMarker(marker){
 
			$.ajax({
				url: "getpos2.php", // fait bien attention à l'adresse par contre
				success: function() { 
						Pos2 = JSON.parse('<?php echo $Pos4 ?>');
						marker.setPosition( new google.maps.LatLng( Pos2.item[0].latitude, Pos2.item[0].longitude));
 
 
								  }
								});
 
 
 
		// déplace le marker
 
		// rappel de la fonction
		setTimeout( function(){
		movePositionMarker(marker);
		}, 10000);
		}

La variable $pos4 que mon script php est sensé me retourné n'est pas reconnu d'après mes tests... pourtant le code me parait juste.

Quelqu'un pourrait m’éclairer Je vous prie ? (aie-je commis une faute dans le codage ? )

Je vous remercie d'avance pour tout aide .

[NoSmoking]

Bonjour,
ta fonction AJAX est un peut troublante, surtout le '<?php echo $Pos4 ?>'.

Cela me parait plus être un problème de compréhension du coté jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$.ajax({
  url: 'getpos2.php',
  success: function(data) {
    // ici on fait le traitement du retour serveur
    var Pos2 = JSON.parse( data);
    // puis la suite du traitement
  }
});

tu peux également utiliser la méthode jQuery.getJSON()

[heavens14]

C'est déjà fait au début no smoking mais ça me renvoi l'erreur de débogage suivante code ci-dessous :

SyntaxeError: JSON.parse: unexpected character.

Quand j'avais lancé un alerte(data) ça ne m'a pas du tout renvoyé la variable $pos4 que je cherchais mais plutôt tout une page qui m'a laissé bouche bée... :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: bdd in C:\wamp\www\BusTracker\getpos2.php on line <i>5</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0008</td><td bgcolor='#eeeeec' align='right'>253912</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\BusTracker\getpos2.php' bgcolor='#eeeeec'>..\getpos2.php<b>:</b>0</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-fatal-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Call to a member function query() on a non-object in C:\wamp\www\BusTracker\getpos2.php on line <i>5</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0008</td><td bgcolor='#eeeeec' align='right'>253912</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\BusTracker\getpos2.php' bgcolor='#eeeeec'>..\getpos2.php<b>:</b>0</td></tr>
</table></font>

[heavens14]

En fait le problème est que je devait passer en paramêtre une certaine variable en POST sous ajax que je devait envoyé à ma page php qui fait le traitement pour pouvoir la récupéré !

en gros la solution c'est ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
$(function() {
				var Pos = JSON.parse('<?php echo $Pos3 ?>');			
				var obj = JSON.parse('<?php echo $msg ?>');
								//alert(obj.item[0].nom);
 
								var latlng = new google.maps.LatLng(32.31006000, -9.23662805);
								var map = new google.maps.Map(document.getElementById("Gmap"), {
 
								zoom : 12,
								center : latlng,
								mapTypeId : google.maps.MapTypeId.ROADMAP,
 
								});
 
								var i=0;
								//alert (obj.item.length);
								while (i<obj.item.length){
								var marker = new google.maps.Marker({
								position : new google.maps.LatLng(obj.item[i].latitude, obj.item[i].longitude),
								map : map,
								title : obj.item[i].nom
								});
								i++;
								}
 
								var marker2 = new google.maps.Marker({
								position : new google.maps.LatLng(Pos.item[0].latitude, Pos.item[0].longitude),
								map : map,
								title : 'BUS'
								});
 
//voici la variable en question !
								var test = { "idbus" : Pos.item[0].IdBus  };
 
// la modification de ma fonction
								movePositionMarker(marker2,test);
 
								});
 
 
								function movePositionMarker(marker,test){
						//l'ajout du type et du data a envoyé a ma page php
						$.ajax({
									type: "POST",
								  	url: "getpos2.php", // fait bien attention à l'adresse par contre
								  	data: test,	
								 	success: function(retour) { 
								 	Pos2 = JSON.parse(retour);
								 	//alert(Pos2.item[0].latitude);
								 	//alert(Pos2.item[0].longitude);
								  	marker.setPosition( new google.maps.LatLng( Pos2.item[0].latitude, Pos2.item[0].longitude));
									//alert(Pos2.item[0].latitude);
 
								  }
								});
 
 
 
		// déplace le marker
 
		// rappel de la fonction
		setTimeout( function(){
		movePositionMarker(marker,test);
		}, 10000);
		}