Suite

Google maps V3 : en api javascript, rendu de route obtenu avec l'api web

Google maps V3 : en api javascript, rendu de route obtenu avec l'api web


Je dois obtenir des directions d'itinéraire avec l'api WEB de Google maps v3 (requête http) (les calculs sont effectués côté serveur, sur la base de ces données, sans interaction client, donc pas de JS disponible). Ensuite, les routes sont triées avec une logique interne, et le serveur (apache/PHP) envoie une page web html/js/jQuery au client, qui affiche une page avec une carte Google (affichée avec JS (ajax) api)

Sur cette carte, je voudrais rendre les routes obtenues précédemment par le serveur avec l'API Web.

J'ai donc essayé de donner le DirectionsResult au google.maps.DirectionsRenderer::setDirections() mais ça ne fait rien, et firebug ne trace aucune erreur (et google JS si obscurci, bien sûr)

Oui, j'ai d'abord défini la carte avec setMap(), et le directionsRenderer s'initialise correctement, tout va bien !

Il semble que de DirectionsResult ne soit pas le même lorsqu'il est obtenu à partir de l'API Web et de l'API JS. Existe-t-il un moyen de le "traduire" afin qu'il puisse être rendu ?

L'alternative serait de refaire les calculs de route côté client avec l'api ajax, uniquement pour les rendre, mais je pense que c'est stupide de recalculer les directions car je les ai déjà; donc je ne veux pas le faire de cette façon à moins que ce ne soit la seule façon.

Merci de votre aide !


Vous devez transtyper chaque objet de la réponse JSON dans le bon type.

L'API du service Web ne renvoie pas non plus leubpropriété de DirectionsResult (propriété non documentée), vous en avez également besoin. LeDirectionsRendererattendub.travelMode,ub.origineetub.destination(toutes les chaînes). Leorigineetdestinationne sont utilisés que si vous activez ledéplaçablepropriété sur les DirectionsRendererOptions - ils sont fondamentalement la même valeur que vous transmettez sur leDirectionsService#route()appel.

En supposant que vous utilisez un navigateur prenant en charge l'ES5Tableau#pourChaqueméthode:

function typecastRoutes(routes){ routes.forEach(function(route){ route.bounds = asBounds(route.bounds); // Je ne pense pas que 'overview_path' soit utilisé mais il existe sur la // réponse de 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); }); }); }); } fonction asBounds(boundsObject){ return new google.maps.LatLngBounds(asLatLng(boundsObject.southwest), asLatLng(boundsObject.northeast)); } function asLatLng(latLngObject){ return new google.maps.LatLng(latLngObject.lat, latLngObject.lng); } function asPath(encodedPolyObject){ return google.maps.geometry.encoding.decodePath( encodedPolyObject.points ); }

Donc tu l'utiliserais comme ceci :

var renderer = new google.maps.DirectionsRenderer(); function renderDirections(map, response, request){ renderer.setOptions({ directions : { routes : typecastRoutes(response.routes), // "ub" est important et n'est pas renvoyé par le service Web c'est un // objet contenant "origin", "destination" et "travelMode" ub : request }, draggable : true, map : map }); }

PS: assurez-vous de charger la bibliothèque de géométrie sinon legoogle.maps.geometry.encoding.decodePathméthode ne sera pas disponible.


La réponse de Miller Medeiros est excellente et m'a fait gagner des heures de travail (merci d'avoir pris le temps de la créer). J'ai dû apporter une modification au code pour qu'il fonctionne pour la V3 de l'API Maps.

À la place de:

ub : demande

Ça devrait être:

demande:demande

J'obtenais des erreurs "travelMode non défini" et je l'avais défini dans la variable de demande. Lorsque j'ai parcouru le code google, j'ai découvert que ub avait été remplacé par request dans V3.

Maintenant, je suis en mesure de restituer les données reçues du service Web Google Maps sur la carte à l'aide de l'API javascript. Merci encore Miller !