Sie können Markierungen in meiner Webanwendung erstellen und eine Route mit Google-Routen mit diesen Markierungen erstellen. Aber ich möchte, dass der Benutzer die Route auch ändern kann, und ich habe ziehbare Richtungen in den Google Maps api v3 gefunden. Gibt es eine Möglichkeit, die geänderten Richtungen in der Datenbank zu speichern, damit Sie mit diesen Informationen die genaue Route erneut erstellen können?
Ich gehe davon aus, dass Folgendes zutrifft:
%Vor% Grundsätzlich wird davon ausgegangen, dass die Start- und Endpunkte bereits ausgewählt wurden und die Standardroute bereits gezeichnet wurde. ( HINWEIS: DirectionsRenderer
wurde mit draggable: true
initialisiert.)
Wenn der Benutzer die Route ändert, löst die Anwendung ein directions_changed
-Ereignis aus. Das können wir so verfolgen:
Etwas anderes auch passiert, wenn die Route geändert wird: ein neues waypoint
wird erstellt. So kommen wir zu allen Wegpunkten:
Die Variable waypoints
ist ein Array von Objekten, die die Stopps der Route auf dem Weg zum Ziel beschreiben. (Beachten Sie, dass mehr Annahmen gemacht wurden: Sie verwenden route[0]
, legs[0]
, etc.)
Jedes waypoint
-Objekt hat eine location
-Eigenschaft, die den Breiten- und Längengrad enthält (verfügbar in location.wa
bzw. location.ya
, aus irgendeinem Grund). So können wir der Anwendung bei jedem Wechsel der Route sagen, dass sie alle Lats und Longs der aktuellen Wegpunkte durchblättern (und speichern) soll. Sobald Sie diese haben, können Sie entscheiden, wie Sie sie speichern möchten (AJAX auf eine serverseitige Seite, die sie in einer Datenbank speichert, localStorage
, etc.)
Dann!
Wenn Sie das nächste Mal diese Seite laden, können Sie diese Wegpunkte aus dem Speicher holen und die Route wie folgt initialisieren:
%Vor%Dies sollte die neue Route beibehalten, die der Benutzer gewählt hat. Eine letzte Anmerkung: Ich habe viel aus dieser Antwort herausgelassen, wie wie sie es speichern, wie Sie wissen, welcher Benutzer welche Route wünscht usw. Aber die Grundlage ist da. Godspeed.
Dies könnte etwas sein, das sich zwischen der Antwort von sdleihssirhc und jetzt geändert hat, aber ich habe die obige Lösung ausprobiert und es ist auf displayer.directions.route gescheitert. [0] sagend, es war undefiniert.
Es sieht so aus, als wäre das Attribut in routes
geändert worden, was eine Weile gedauert hat. Die folgende Zeile funktioniert für mich:
Hoffentlich wird das Zeit und Frustration für jemanden sparen, der versucht, dies zur Arbeit zu bringen.
Tags und Links javascript google-maps api