Passage tableau SQL vers javascript

14 mai 2012, 20:18

Bonjour à tous.
Voilà deux jours que je galère sur un problème qui ne doit pas être bien compliqué mais je n'arrive pas à trouver la bonne syntaxe.

Je veux produire du javascript avec une page php.
Le soucis c'est que c'est un tableau javascript que je dois construire à partir d'un tableau venant d'une requête SQL.

QQues explications sur le contexte:
J'affiche sur une carte google maps des marqueurs.
Ces marqueurs sont les positions successives d'un objet sur le terrain enregistrées dans une base de données.
J'arrive à afficher les marqueurs sur la carte grâce à une requête SQL qui récupére les coordonnées de ces points enregistrés mais il me faut maintenant les relier par des polylignes.
La syntaxe javascript que je dois donc produire est la suivante: (codée en dur)

Code : Tout sélectionner

var tableauPointsPolyline = [
					new google.maps.LatLng(47.423820, 0.709820),
					new google.maps.LatLng(47.423298, 0.708446),					
					new google.maps.LatLng(47.338066, 0.657806)
				];
				var optionsPolyline = {
					map: map,
					path: tableauPointsPolyline
				};
				var maPolyline = new google.maps.Polyline(optionsPolyline);

Je vous passe les détails mais sachez que ces quelques lignes de code ci dessus permetttent de tracer des lignes sur une carte google maps entre les coordonnées gps contenues dans le tableau.
Mon problème c'est que je n'arrive pas à avoir en sortie cette écriture 'en dur' avec du PHP, ce sont les 5 lignes du début qui posent problème car c'est une déclaration de tableau et il n'y a pas de virgule après la prenthèse finale...

A la place des chiffres codés en dur, je dois utiliser ces variables qui proviennent de ma requête SQL: ('<?php echo $donnees['POSITION_lat']; ?>','<?php echo $donnees['POSITION_lon'] ; ?>') qui est un tableau résultant de la requête SQL qui à récupéré tous mes points.

J'espère avoir été assez clair, n'hésitez pas à me dire si il faut des infos supplémentaires.

Je précise que c'est pour un projet humanitaire pour récolter des fonds.
Merci par avance si quelqu'un peut m'aider, c'est le seul point sur lequel je bloque actuellement.

14 mai 2012, 20:37

<?PHP
echo 'var tableauPointsPolyline = [',"\n";
$donnee = mysql_fetch_array(???);
echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')';   // Ecriture de la ligne sans la virgule
while ($donnee = mysql_fetch_array(???))
{
     echo ',',"\n";  // Ecriture de la virgule et du saut de ligne 
     echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')';  // Ecriture de la ligne sans la virgule
}
echo ' ];',"\n";
?>

Un truc dans ce genre devrait marcher

14 mai 2012, 21:51

<?PHP
echo 'var tableauPointsPolyline = [',"\n";
$donnee = mysql_fetch_array(???);
echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')';   // Ecriture de la ligne sans la virgule
while ($donnee = mysql_fetch_array(???))
{
     echo ',',"\n";  // Ecriture de la virgule et du saut de ligne 
     echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')';  // Ecriture de la ligne sans la virgule
}
echo ' ];',"\n";
?>

Un truc dans ce genre devrait marcher

Merci pour ta réponse.
Je viens de tester mais je n'ai toujours pas ces fichus segments de ligne qui s'affichent...
C'est un bon début car il n'y a pas d'erreur en retour apparemment.

j'ai essayé ça:

<?PHP
echo 'var tableauPointsPolyline = [',"\n";
$donnee = mysql_fetch_array($result);
echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')'; // Ecriture de la ligne sans la virgule
while ($donnee = mysql_fetch_array($result))
{
echo ',',"\n"; // Ecriture de la virgule et du saut de ligne
echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')'; // Ecriture de la ligne sans la virgule
}
echo ' ];',"\n";
?>

14 mai 2012, 21:53

Ca avance,

J'ai bien le tracé mais j'ai perdu l'affichage de mes marqueurs...
J'y suis presque, merci

15 mai 2012, 10:27

Je suis bien obligé de revenir demander un petit coup de pouce...

Le code que tu m'as fourni fonctionne parfaitement et permet la constitution du tableau de variables pour afficher le parcours et je t'en remercie mais je ne parviens pas à l'inclure proprement dans mon code

Je m'explique:
Lorsque je place ton code dans le mien, je perd l'affichage de mes marqueurs ou plus exactement il n'y a plus que le premier qui s'affiche.

J'en conclue donc que je brise sans doute la boucle qui permet de tous les afficher car sans rajouter ton code, les marqueurs sont tous bien affichés.
J'ai tout essayé en copiant/collant mais comme je ne parle pas javascript c'est un peu au hasard...
Bref je ne m'en sort pas et c'est sans doute une petite virgule, parenthèse ou accolade qui bloque tout

Je poste ci dessous l'integralité du code AVEC LE RAJOUT DE CODE QUE TU M'AS DONNÉ POUR AFFICHER LE TRACÉ ENTRE LES MARQUEURS .

Si on enlève ton code compris entre les commentaires (/////TRACAGE PARCOURS ... //FIN TRACAGE POLYLIGNES), les marqueurs apparaîssent tous sur la carte !
mais dès que je remet le code pour afficher le parcours entre les marqueurs, le tracé est bien affiché mais par contre je n'ai plus mes marqueurs (juste le premier est affiché ce qui me donne à penser que la boucle d'affichage des marqueurs est cassée)

En espérant que tu pourras m'aider ou que quelqu'un d'autre pourra y jeter un oeil.

Voici le code:

Code : Tout sélectionner

<?php
$serveur = mysql_connect("localhost","root","");
if (!$serveur)
{
die('Non connecté'. mysql_error());
}

$bd = mysql_select_db('mabasequivabien', $serveur);
if (!$bd)
{
die ('Impossible d\'utiliser la base :'. mysql_error());
}

$nomdelacarterecherchee=$_GET['CARTERECHERCHEE_FORM']; // On récupère le nom de l'objet dont on veut tracer le parcours sur une carte google maps.

// La requête quivabien et qui sort les positions successives de l'objet demandé
$sql = 'Select localisation.name, localisation.POSITION_lat, localisation.POSITION_lon, localisation.date_enreg
from localisation
where localisation.name = "'.$nomdelacarterecherchee.'"
Order by localisation.date_enreg, localisation.id_localisation';
$result=mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
?>


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

// Le javascript made in google maps...
// Définition de la carte et des options d'affichage.
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(48,2);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 

<?php
while ($donnees = mysql_fetch_array($result)){?>
//defintion d'un point sur la carte
var point = new google.maps.LatLng
('<?php echo $donnees['POSITION_lat']; ?>','<?php echo $donnees['POSITION_lon'] ; ?>')
var marker = new google.maps.Marker({
        position: point,
        icon: "full.png",
        map: map
    });  


//Ajout d'un marqueur sur la carte
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
  content: '',
  size: new google.maps.Size(50,50),
position:point
});

//Ajout du contenu d'une infobulle
  infowindow.open(map, this);
 infowindow.setContent( '<?php echo "latitude : ".$donnees['POSITION_lon']."<br/> "."longitude :".$donnees['POSITION_lat']."" ; ?>');
});

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// TRACAGE PARCOURS CODE EN DUR AVEC FONCTION GOOGLE MAPS POLYLINE()
<?PHP
echo 'var tableauPointsPolyline = [',"\n";
$donnee = mysql_fetch_array($result);
echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')'; // Ecriture de la ligne sans la virgule
while ($donnee = mysql_fetch_array($result))
{
 echo ',',"\n"; // Ecriture de la virgule et du saut de ligne 
 echo 'new google.maps.LatLng(',$donnee['POSITION_lat'],',',$donnee['POSITION_lon'],')'; // Ecriture de la ligne sans la virgule
}
echo ' ];',"\n";
?>
					
// DEFINITION DES OPTIONS DE LA POLYLIGNE
				var optionsPolyline = {
					map: map,
					path: tableauPointsPolyline
				};
				
// TRACAGE DE LA POLYLIGNE
				var maPolyline = new google.maps.Polyline(optionsPolyline);


// FIN TRACAGE POLYLIGNES ENTRE LES MARQUEURS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<?php } ?>


} //fin initialize




</script>
</head>
<body onload="initialize()"  >
<center>
<div id="map_canvas" style="width:700px; height:700px"></div>
</center>
</body>
</html>

15 mai 2012, 12:33

J'ai identifié le ptoblème mais je suis incapable d'e le résoudre:

Ce code php:

Code : Tout sélectionner

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// TRACAGE PARCOURS CODE EN DUR AVEC FONCTION GOOGLE MAPS POLYLINE()

<?php

echo 'var tableauPointsPolyline = [',"\n";


echo 'new google.maps.LatLng('.$donnee["POSITION_lat"].','.$donnee["POSITION_lon"].')'; // Ecriture de la ligne sans la virgule

while ($donnee = mysql_fetch_array($result))
{
 echo ',',"\ntoto"; // Ecriture de la virgule et du saut de ligne 
 echo 'new google.maps.LatLng('.$donnee['POSITION_lat'].','.$donnee['POSITION_lon'].')'; // Ecriture de la ligne sans la virgule
}
echo ' ];',"\n";
?>
					
// DEFINITION DES OPTIONS DE LA POLYLIGNE
				var optionsPolyline = {
					map: map,
					path: tableauPointsPolyline
				};
				
// TRACAGE DE LA POLYLIGNE
				var maPolyline = new google.maps.Polyline(optionsPolyline);


// FIN TRACAGE POLYLIGNES ENTRE LES MARQUEURS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

donne ceci une fois interprété et affiché dans le navigateur:
Il y a un problème au niveau de la boucle et du passage des variables PHP dans le javascript de la page.
Le code: var tableauPointsPolyline = [ new google.maps.LatLng(,) ]; devrait contenir les valeurs du tableau issues de la requêtes SQL

Code : Tout sélectionner

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// TRACAGE PARCOURS CODE EN DUR AVEC FONCTION GOOGLE MAPS POLYLINE()

var tableauPointsPolyline = [
new google.maps.LatLng(,) ];
					
// DEFINITION DES OPTIONS DE LA POLYLIGNE
				var optionsPolyline = {
					map: map,
					path: tableauPointsPolyline
				};
				
// TRACAGE DE LA POLYLIGNE
				var maPolyline = new google.maps.Polyline(optionsPolyline);


// FIN TRACAGE POLYLIGNES ENTRE LES MARQUEURS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

15 mai 2012, 20:07

C'est réglé, j'ai fini par trouver une solution.

Merci.

Passage tableau SQL vers javascript

Qui est en ligne