Enregistrement de l'instruction Google Directions API v3

Question

Je crée une application avec l'API Directions pour créer des itinéraires à vélo. L'utilisateur doit pouvoir démarrer à partir d'un point personnalisé, ajouter des points d'arrêt personnalisés le long de l'itinéraire et faire glisser les instructions. Une fois qu'ils sont terminés, je dois enregistrer le nouvel itinéraire dans une base de données. J'ai la carte en marche, les utilisateurs peuvent ajouter leur point de départ et leurs waypoints via des boîtes de saisie HTML, et c'est parfaitement dragable (désolé pour les quantités copieuses de commentaires ... ceux-ci sont principalement pour que je me souvienne de ce qui se passe ... oh, et ne vous inquiétez pas dans cette section sur la syntaxe ... Je copier et coller à partir de différentes parties, donc je pourrais avoir manqué un « } » ... toutes ces fonctions de code):

function initialize() { 

    var rendererOptions = { 
     draggable: true, 
    //end redererOptions 
    }; 

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    var chicago = new google.maps.LatLng(42.73352,-84.48383); 
    var myOptions = { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago, 
    //end myOptions 
    } 

    //create the world of the dream (define where the map's gonna go 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    //and the subject fills it with it's subconscious (Call the map from Directions and place it in the div we've created) 
    directionsDisplay.setMap(map); 
    //tell google where the printed directions will go 
    directionsDisplay.setPanel(document.getElementById("directions_detail")); 
//end initialize() 
}; 

function calcRoute() { 
//get start string from Start input box 
var start = document.getElementById("start").value; 
//get end string from End input box 
var end = document.getElementById("end").value; 
    //set up an array for waypoints 
var waypts = []; 

    //define where the waypoints will come from 
var checkboxArray = document.getElementById("waypoints"); 

     //loop to retrieve any waypoints from that box 
     for (var i = 0; i < checkboxArray.length; i++) { 
      //if any options in the select box are selected, add them 
      if (checkboxArray.options[i].selected == true) { 
      waypts.push({ 

      //set up parameters to push to the Directions API 
      location:checkboxArray[i].value, 

      //make them explicit waypoints that separate the route into legs 
       stopover:true}); 
      //end if loop 
      } 
//call the Directions Service API, pass the request variable (above) and call a function asking for the response and status objects 
directionsService.route(request, function(response, status) { 


if (status == google.maps.DirectionsStatus.OK) 
     { 
      //pass the response object to the map 
      directionsDisplay.setDirections(response); 

      //set up a route variable for the upcoming loop 
      var route = response.routes[0]; 
      //set up a variable for the route summary, define the <div> where this will be presented to the user 
      var summaryPanel = document.getElementById("directions_panel"); 

      //clear the <div> 
      summaryPanel.innerHTML = ""; 
      //turn direcitons_panel "on"...gives the div a color (in my css) 
      summaryPanel.className = "directions_panel_on"; 

      // For each route, display summary information. 
      for (var i = 0; i < route.legs.length; i++) { 
       //set up a route segment variable to display a 1-based segment for the segment summary in html 
       var routeSegment = i + 1; 
       summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />"; 
       summaryPanel.innerHTML += route.legs[i].start_address + " to "; 
       summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; 
       summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; 

      //end for loop 
      }; 

    //end directionsService() function 
    }); 
//end calcRoute() function 
} 

SO. Tu as ma base. Tout est fonctionnel (je l'ai en cours d'exécution sur mon serveur) ... les utilisateurs peuvent créer une carte entièrement personnalisée. Je ne peux pas l'enregistrer s'ils ont décidé de faire glisser le chemin de l'itinéraire parce que j'ai besoin d'appeler un objet avec AJAX, et le seul objet que je sais appeler est lié à la variable request, qui définit le tableau de waypoints comme points d'escale durs qui divisent la route.

Je sais que le tableau que je cherche est appelé via_waypoint[] à l'intérieur du tableau legs[] ... il est juste d'obtenir un objet de la DirectionsRenderer sacrément avec le tableau via_waypoints[] stupide peuplé. J'ai le reste prêt à aller sur PHP/MySqul et AJAX.

J'ai déjà essayé this tutorial ... et je ne peux pas le faire fonctionner. La réponse principale elle-même dit qu'il a beaucoup été omis, et je suis si nouveau à JavaScript, il semble qu'il a trop omis pour moi.

[émoticône yeux chiot] S'il vous plaît aider

Answer 1

J'essayais d'enregistrer des waypoints et cela devrait être utile aux autres utilisateurs qui recherchent la même chose.

J'ai créé un ensemble de scripts pour enregistrer les waypoints de directions dans la base de données et aussi pour récupérer ces informations et afficher les waypoints dans une autre carte. J'ai fourni des fichiers html, php et sql et une explication complète dans ce lien.

http://vikku.info/programming/google-maps-v3/draggable-directions/saving-draggable-directions-saving-waypoints-google-directions-google-maps-v3.htm.

Vous pouvez également copier le code source de cette page et vous pouvez modifier selon vos préférences et utiliser le fichier sql pour la base de données.

Answer 2

MISE À JOUR: Je l'ai trouvé ma propre réponse.

L'objet qui contient les données cartographiques les plus récentes est directionsDisplay.directions. Cet objet contient les données de la carte AS SHOWN ... y compris le tableau via_waypoints[], qui apparaît en tant qu'enfant du tableau legs[].

Le code ci-dessous montre comment vous pouvez imprimer la chaîne pour votre plaisir d'analyse (je l'ai fait cette fonction à appeler par un bouton sur le côté HTML):

//GET THE JSON Object 
var newString = JSON.stringify(directionsDisplay.directions); 

//set up area to place drop directionsResponse object string 
var directions_response_panel = document.getElementById("directions_response"); 
//dump any contents in directions_response_panel 
directions_response_panel.innerHTML = ""; 
//add JSON string to it 
directions_response_panel.innerHTML = "<pre>" + newString + "</pre>"; 

Leçon de la nuit: directionsDisplay.directions appelle les données de la carte APRÈS qu'un utilisateur a apporté des modifications entraînables à leurs directions.