Mehr

Google Maps V3: in Javascript-API, mit Web-API erhaltene Route rendern

Google Maps V3: in Javascript-API, mit Web-API erhaltene Route rendern


Ich muss eine Wegbeschreibung mit der API von Google Maps v3 WEB (http-Anfrage) abrufen (Berechnungen werden serverseitig basierend auf diesen Daten durchgeführt, ohne Client-Interaktion, daher kein JS verfügbar). Dann werden die Routen mit interner Logik aussortiert und der Server (Apache/PHP) sendet eine Web-html/js/jQuery-Seite an den Client, der eine Seite mit einer Google-Karte anzeigt (dargestellt mit JS (Ajax) API)

Auf dieser Karte möchte ich die Routen rendern, die der Server zuvor mit der Web-API erhalten hat.

Also habe ich versucht, das DirectionsResult an google.maps.DirectionsRenderer::setDirections() zu übergeben, aber es tut nichts und Firebug verfolgt keinen Fehler (und natürlich Google JS, wenn es verschleiert ist).

Ja, ich habe zuerst die Karte mit setMap() gesetzt, und der DirectionsRenderer ist korrekt initialisiert, alles OK !

Es scheint, dass de DirectionsResult nicht dasselbe ist, wenn es von der Web-API und von der JS-API abgerufen wird. Gibt es eine Möglichkeit, es zu "übersetzen", damit es gerendert werden kann?

Die Alternative wäre, die Routenberechnungen auf der Client-Seite mit der Ajax-API erneut durchzuführen, nur um sie zu rendern, aber ich denke, es ist dumm, Richtungen neu zu berechnen, da ich sie bereits habe; Deshalb möchte ich es nicht so machen, es sei denn, es ist der einzige Weg.

Danke für Ihre Hilfe !


Sie müssen jedes Objekt der JSON-Antwort in den richtigen Typ umwandeln.

Die Webservice-API gibt auch nicht dieub-Eigenschaft des DirectionsResult (undokumentierte Eigenschaft), benötigen Sie diese ebenfalls. DasAnfahrtRenderererwartetub.travelMode,ub.ursprungundub.destination(alle Saiten). DasUrsprungundZielwerden nur verwendet, wenn Sie dieziehbar-Eigenschaft auf den DirectionsRendererOptions - sie sind im Grunde derselbe Wert, den Sie an die weitergebenWegbeschreibungService#route()Forderung.

Angenommen, Sie verwenden einen Browser, der ES5 unterstütztArray#forEachMethode:

function typecastRoutes(routes){routes.forEach(function(route){ route.bounds = asBounds(route.bounds); // Ich glaube nicht, dass 'overview_path' verwendet wird, aber es existiert in der // Antwort von DirectionsService.route () route.overview_path = asPath(route.overview_polyline); route.legs.forEach(function(leg){ leg.start_location = asLatLng(leg.start_location); leg.end_location = asLatLng(leg.end_location); leg.steps. forEach(function(step){ step.start_location = asLatLng(step.start_location); step.end_location = asLatLng(step.end_location); step.path = asPath(step.polyline); }); }); }); } Funktion asBounds(boundsObject){ return new google.maps.LatLngBounds(asLatLng(boundsObject.southwest), asLatLng(boundsObject.northeast)); } Funktion asLatLng (latLngObject) { return new google.maps.LatLng (latLngObject.lat, latLngObject.lng); } Funktion asPath(encodedPolyObject){ return google.maps.geometry.encoding.decodePath(encodedPolyObject.points); }

Sie würden es also so verwenden:

var renderer = new google.maps.DirectionsRenderer(); Funktion renderDirections(map, response, request){ renderer.setOptions({ Directions: { Routes: typecastRoutes(response.routes), // "ub" ist wichtig und wird nicht vom Webservice zurückgegeben. Es ist ein // Objekt, das "origin" enthält, "destination" und "travelMode" ub : request }, draggable : true, map : map }); }

PS: Stellen Sie sicher, dass Sie die Geometriebibliothek laden, sonst wird diegoogle.maps.geometry.encoding.decodePathMethode wird nicht verfügbar sein.


Die Antwort von Miller Medeiros ist ausgezeichnet und hat mir Stunden Arbeit erspart (danke, dass Sie sich die Zeit genommen haben, sie zu erstellen). Ich musste eine Änderung am Code vornehmen, damit er für die V3 der Maps-API funktioniert.

Anstatt:

ub: anfrage

Es sollte sein:

Anfrage:Anfrage

Ich erhielt die Fehlermeldung "TravelMode nicht definiert" und hatte sie in der Request-Variablen definiert. Als ich den Google-Code durchging, stellte ich fest, dass ub in V3 durch eine Anfrage ersetzt wurde.

Jetzt kann ich Daten, die ich vom Google Maps-Webdienst erhalten habe, mithilfe der Javascript-API in die Karte rendern. Danke nochmal Müller!