Je veux utiliser JSON??

-
Bonjour,
Je récupère des éléments de ma base de donnée MySql en php (via fetch ()), et j'aimerai renvoyer ces éléments sous forme de variable va1 et va2 dans mon code javascript.

mon code php:
<?php
 
try
 
{
 
$bdd = new PDO('mysql:host=localhost;dbname=data_marker', 'root', '');
 
}
 
catch (Exception $e)
 
{
 
die('Erreur : ' . $e->getMessage());
 
  
 
}
 
$Latitude = json_encode( $bdd->query('SELECT (lat) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0), JSON_NUMERIC_CHECK);
 
$Longitude = json_encode( $bdd->query('SELECT (lng) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0),JSON_NUMERIC_CHECK);
 
$reponse->closeCursor(); // Termine le traitement de la requête
 
  
 
 ?>

mon code java script:
function initialize(){
 
var mapOptions={
 
zoom: 6, // 0 à 21
 
center: new google.maps.LatLng(47,2), // centre de la carte
 
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
 
}
 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
  
 
var myLatLng= new google.maps.LatLng(va1,va2);
 
var marker = new google.maps.Marker ({
 
position: myLatLng,
 
map: map,
 
titre: "Auriac-sur-vendinelle"
 
});
 
 
 
var myLatLng2 = new google.maps.LatLng(43.6,2.25);
 
var marker2 = new google.maps.Marker ({
 
position: myLatLng2,
 
map: map,
 
titre: "Castres"
 
});
 
 
 
//trajet 1
 
var directionsService = new google.maps.DirectionsService();
 
var directionsDisplay = new google.maps.DirectionsRenderer({
 
'map': map
 
});
 
 
 
var request = {
 
origin: myLatLng,
 
destination: myLatLng2,
 
travelMode: google.maps.DirectionsTravelMode.DRIVING,
 
unitSystem: google.maps.DirectionsUnitSystem.METRIC
 
};
 
 
 
directionsService.route(request, function(response, status){
 
if(status == google.maps.DirectionsStatus.OK){
 
directionsDisplay.setDirections(response);
 
directionsDisplay.suppressMarkers = false;
 
directionsDisplay.setOptions({
 
polylineOptions: {strokeColor: '#008000'},
 
preserveViewport: false
 
});
 
}
 
});
 
 
 
  
 
}
Afficher la suite 

Votre réponse

1 réponse

Messages postés
23637
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 décembre 2018
0
Merci
Bonjour,


1 - Tu aurais pu continuer dans la conversation initiale au lieu d'ouvrir une nouvelle discussion !
Donc tu as le choix ... soit tu fermes la précédente .... soit tu retourne dans la discussion initiale et je clos celle là !!!

2 - Pourquoi faire deux requêtes .. alors qu'une seule suffit ???
 
$Latitude = json_encode( $bdd->query('SELECT (lat) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0), JSON_NUMERIC_CHECK);
 
$Longitude = json_encode( $bdd->query('SELECT (lng) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0),JSON_NUMERIC_CHECK);
 


A changer par :


try{
  $sql = "SELECT lat,lng FROM markers";
  $sth = $bdd->prepare($sql) ;
  $sth->execute();

  //On stocke le résultat en ARRAY
  $result = $sth->fetchAll();

} catch (Exception $e) {
  die('Erreur : ' . $e->getMessage());
}

//on convertit en JSON
$arr_Json = json_encode($result);




Ensuite.... on ne sait rien de la structure de ton site .... Où se trouve ton code php.. par rapport à ton code javascript ??
As tu enfin accepté d'utiliser de l' AJAX comme je te l'ai proposé ??

Merci d'être plus précise !!!!

bonjour
1-je préfère que je ferme la précédente;mais j'ai essayé de la supprimer mais j'ai pas pu!
2- pour mon travail,j'ai un prog en javascript et l'autre en php et je veux récupérer des éléments de ma base de donnée MySql en php (via fetch ()), et j'aimerais renvoyer ces éléments sous forme de variable va1 et va2 dans mon code javascript.
3-j'ai accepté d'utiliser de l' AJAX comme vous m'avez proposé ^^
Merci
Et comment je récupéré un seule élément du tableaux puis récupérer sa valeur en javascript
jordane45
Messages postés
23637
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 décembre 2018
> linda -

3-j'ai accepté d'utiliser de l' AJAX comme vous m'avez proposé ^^
Merci
Et comment je récupéré un seule élément du tableaux puis récupérer sa valeur en javascript

Il faut, pour que l'on puisse t'aider, avoir l'intégralité de ton code JAVASCRIPT (celui que tu as mis en place pour l'AJAX).


1-je préfère que je ferme la précédente;mais j'ai essayé de la supprimer mais j'ai pas pu!

Je m'en occupe.
D'accord je vais envoyer tout le travail:
index.php:

<!DOCTYPE html>
<html>
 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Google Maps API : créer des trajets</title>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script src="js/script.js"></script>
 </head>
<?php 
try
{
$bdd = new PDO('mysql:host=localhost;dbname=data_marker', 'root', '');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
try{
  $sql = "SELECT lat,lng FROM markers";
  $sth = $bdd->prepare($sql) ;
  $sth->execute();
//On stocke le résultat en ARRAY
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
  die('Erreur : ' . $e->getMessage());
}
//on convertit en JSON
$arr_Json = json_encode($result,JSON_NUMERIC_CHECK);
echo $arr_Json.'<br />';
 //json_encode(array('prenom' => 'bob'));
echo '<body onload="initialize()">
  <div id="map_canvas"></div>
 </body>';
 
?>
 
</html>


style.css:

html, body{
 height:100%;
 margin: 0;
 padding: 0;
}


#map_canvas{
 height:700px;
 width: 700px;
}


script.js:
function initialize(){
 var mapOptions={
  zoom: 6, // 0 à 21
  center: new google.maps.LatLng(47,2), // centre de la carte
  mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 var myLatLng = new google.maps.LatLng(43.52500,1.82694);
 var marker = new google.maps.Marker ({
  position: myLatLng,
  map: map,
  titre: "Auriac-sur-vendinelle"
 });

 var myLatLng2 = new google.maps.LatLng(43.6,2.25);
 var marker2 = new google.maps.Marker ({
  position: myLatLng2,
  map: map,
  titre: "Castres"
 });

 //trajet 1
 var directionsService = new google.maps.DirectionsService();
 var directionsDisplay = new google.maps.DirectionsRenderer({
  'map': map
 });

 var request = {
  origin: myLatLng,
  destination: myLatLng2,
  travelMode: google.maps.DirectionsTravelMode.DRIVING,
  unitSystem: google.maps.DirectionsUnitSystem.METRIC
 };

 directionsService.route(request, function(response, status){
  if(status == google.maps.DirectionsStatus.OK){
   directionsDisplay.setDirections(response);
   directionsDisplay.suppressMarkers = false;
   directionsDisplay.setOptions({
    polylineOptions: {strokeColor: '#008000'},
    preserveViewport: false
   });
  }
 });


 
}
Mon but et de remplacer le premier paramètre de chacune des deux instructions par les éléments de la première colonne de ma table et de remplacer aussi le deuxième paramètre de chacune des deux instructions par les éléments de la deuxième colonne de ma table?
var myLatLng = new google.maps.LatLng(43.52500,1.82694);
 var myLatLng2 = new google.maps.LatLng(43.6,2.25);
jordane45
Messages postés
23637
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 décembre 2018
> linda -
Tu n'utilises pas du tout l'ajax dans l'exemple de code que tu nous donnes.......

M'enfin.. bref....
fais donc un console.log de la variable $arr_Json dans ton code javascript
comme ceci :
var arrJson = <?php echo $arr_Json ;?>
console.log(arrJson);


Puis regarde dans la CONSOLE de ton navigateur ce que ça t'affiche. (et colle nous le résultat ici....)
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.