IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

APIs Google Discussion :

Itinéraire de plusieurs points d'une bdd mysql


Sujet :

APIs Google

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 199
    Par défaut Itinéraire de plusieurs points d'une bdd mysql
    Bonjour,

    Est-il possible lorsque l'on clique sur un bouton par exemple d'être envoyé sur une page contenant une map avec plusieurs markers et l'itinéraire du point a en passant par b et c et finissant à d ?

    J'arrive soit à afficher les markers ou soit un itinéraire de a vers d (sans les waypoints) mais l'itinéraire à partir de liste déroulante alors que j'aimerai arriver directement dessus l'itinéraire.

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 199
    Par défaut
    Plus clairement, je veux que la fonction load() qui a pour but d'initialiser la map (et qui pour l'instant charge bien tous les markers de ma bdd) initialise aussi l'itinéraire entre 2 points.

    Ma fonction load():

    Code : 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
    function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.6145, -122.3418), 
            zoom: 13,
            mapTypeId: 'satellite'
          });
          var infoWindow = new google.maps.InfoWindow;
     
          // downloadUrl génère le fichier xml
          downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
    		  var tourId = markers[i].getAttribute("tourId");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
              });
              bindInfoWindow(marker, map, infoWindow, html);
            }
          });
        }
    Merci.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 217
    Par défaut
    Bonjour,
    qu'est ce qui t'empêche de lancer une requête dans ta fonction load ()via un new google.maps.DirectionsService()?

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 199
    Par défaut
    Merci pour vos réponses,

    Je viens de voir votre message, j'ai fais autrement :

    fichier php :

    Code : 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
    <b>Depart du circuit (Point A) :</b> <?php echo $pointDepart ; ?>
     
        <input type="hidden" id="start" value="<?php  echo $coordDepart ; ?>"/>
     
    	<br /><br />
     
    	<b>Etapes :</b> <br>
        <select multiple id="waypoints">
          <option value="1301 Alaskan Way, Seattle, WA ">1301 Alaskan Way, Seattle, WA </input>
          <option value="2234 2nd Ave, Seattle, WA">2234 2nd Ave, Seattle, WA</input>
        </select>
     
    	<br /><br />
     
        <b>Arrivee :</b> <?php echo $pointDestination ; ?>
     
    	<input type="hidden" id="end" value="<?php  echo $coordDestination ; ?>"/>
     
    	<br />
    	<br />
     
    	<input type="submit" onclick="itineraire();" value="Calculer">
     
    	<div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
    fichier de fonctions js :

    Code : 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
    function itineraire() {
    		  var start = document.getElementById('start').value;
    		  var end = document.getElementById('end').value;
    		  var waypts = [];
    		  var checkboxArray = document.getElementById('waypoints');
    		  for (var i = 0; i < checkboxArray.length; i++) {
    			if (checkboxArray.options[i].selected == true) {
    			  waypts.push({
    				  location:checkboxArray[i].value,
    				  stopover:true});
    			}
    		  }
     
    		  var request = {
    			  origin: start,
    			  destination: end,
    			  waypoints: waypts,
    			  optimizeWaypoints: true,
    			  travelMode: google.maps.TravelMode.DRIVING
    		  };
    		  directionsService.route(request, function(response, status) {
    			if (status == google.maps.DirectionsStatus.OK) {
    			  directionsDisplay.setDirections(response);
    			  var route = response.routes[0];
    			  var summaryPanel = document.getElementById('warnings_panel');
    			  summaryPanel.innerHTML = '';
    			  // For each route, display summary information.
    			  for (var i = 0; i < route.legs.length; i++) {
    				var routeSegment = i + 1;
    				summaryPanel.innerHTML += '<b>Itinéraire ' + routeSegment + '</b><br>';
    				summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
    				summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
    				summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br><br>';
    			  }
    			}
    		  });
    	}
    J'ai créé une fonction onload() qui permet de chargé les 2 fonctions load() et itineraire() au chargement de la page :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function onload(){ 
    		load(); 
    		itineraire(); 
    	}
    pour :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <body onload="onload()">
    Pour l'instant mon système charge bien dès le début la distance entre le départ et l'arrivée. Il me manque juste l'étape, qui ne s'exécute que par un clique sur le bouton calculer via une checkbox. Je n'arrive pas à chargé aussi l'étape via un input hidden comme le départ et l'arrivée ..

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 199
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var waypts = [];
    	    var checkboxArray = document.getElementById('waypoints');
    	    for (var i = 0; i < checkboxArray.length; i++) {
    			if (checkboxArray.options[i].selected == true) {
    			    waypts.push({
    				    location:checkboxArray[i].value,
    				    stopover:true});
    			}
    En fait c'est ici où il faut que j'adapte mon code pour un input hidden à la place d'une checkbox mais j'ai essayé pas mal de choses sans succès ..

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2012
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2012
    Messages : 199
    Par défaut
    J'ai géré mon problème avec wayPointArray.

    Dernier petit soucis : l'infobulle affichée à chaque marker m'affiche bien l'adresse mais je ne vois pas du tout dans mon code où l'a modifier en y ajoutant un descriptif et une img par exemple.

    Si quelqu'un pouvait m'aider : (je pense que c'est dans ma function itineraire())

    Code : 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
     
    function itineraire() {
    	    var start = document.getElementById('start').value;
    	    var end = document.getElementById('end').value;
    		wayPointArray = new Array();//création d'un tableau vide
    		var waypoints1 = document.getElementById('waypoints1').value;//récupération de la lat et la lng des waypoints via hidden
    		var waypoints2 = document.getElementById('waypoints2').value;
    		wayPointArray.push({location: waypoints1, stopover: true},
    						   {location: waypoints2, stopover: false}); 
     
    		var request = {
    			origin: start,
    			destination: end,
    			waypoints: wayPointArray,
    			optimizeWaypoints: true,
    			travelMode: google.maps.TravelMode.DRIVING,
    			avoidHighways: true
    		};
    		directionsService.route(request, function(response, status) {
    			if (status == google.maps.DirectionsStatus.OK) {
    				directionsDisplay.setDirections(response);
    				var route = response.routes[0];
    				var summaryPanel = document.getElementById('warnings_panel');
    				summaryPanel.innerHTML = '';
     
    				for (var i = 0; i < route.legs.length; i++) {
    					//var routeSegment = i + 1;
    					//summaryPanel.innerHTML += '<b>Itinéraire ' + routeSegment + '</b><br>';
    					summaryPanel.innerHTML += route.legs[i].start_address + '<b> VERS </b>';
    					summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
    					summaryPanel.innerHTML += '<b>Distance : ' + route.legs[i].distance.text + '</b><br>';
    					summaryPanel.innerHTML += '<b>Durée : ' + route.legs[i].duration.text + '</b><br><br>';
    				}
    			}
    		});
    	}

Discussions similaires

  1. Dialoguer avec une BDD MySQL en language C
    Par veridik dans le forum Requêtes
    Réponses: 2
    Dernier message: 11/07/2005, 11h58
  2. [debutant] connection à une BDD MySQL
    Par Golork dans le forum Bases de données
    Réponses: 1
    Dernier message: 11/03/2005, 16h51
  3. Réponses: 2
    Dernier message: 06/01/2005, 21h09
  4. Changements de colonnes dans une BDD MySQL
    Par arnaud_verlaine dans le forum Requêtes
    Réponses: 8
    Dernier message: 07/08/2003, 11h33
  5. connection a une BDD MySql
    Par delire8 dans le forum MFC
    Réponses: 7
    Dernier message: 19/06/2002, 18h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo