Est-il possible, avec l'API de Google Maps, de mettre les rues en surbrillance ?
La seule chose que j'ai trouvée qui se rapprochait de cet effet était de dessiner des lignes par-dessus. Mais c'est beaucoup de travail et plus imprécis. Les lignes passent également sur les noms de lieux.
Ce que je veux, c'est mettre en évidence certains noms de rue comme si vous naviguiez d'un point a à un point b. Par exemple, si 10 rues sont fermées par des ouvriers, je peux les mettre en évidence.
Cela peut être fait assez facilement en utilisant le moteur de rendu des directions de l'API Maps.
Vous devez fournir les coordonnées lat/long des points de départ et d'arrivée de votre rue, et le moteur de rendu effectue tous les calculs et la peinture pour vous. Vous n'avez PAS besoin de lire les étapes de la direction et de dessiner la polyligne vous-même !
Voyez-le en action ici :
http://jsfiddle.net/HG7SV/15/
Voici le code, toute la magie est faite dans la fonction initialize() :
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
// init map
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init directions service
var dirService = new google.maps.DirectionsService();
var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true});
dirRenderer.setMap(map);
// highlight a street
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
dirRenderer.setDirections(result);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>Si votre rue est courbe et que le moteur de rendu trouve un raccourci que vous n'aviez pas prévu, il est facile d'y remédier en ajoutant des points de repère intermédiaires pour forcer la ligne tracée à suivre exactement la rue souhaitée :
var request = {
origin: "48.1252,11.5407",
destination: "48.13376,11.5535",
waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}],
travelMode: google.maps.TravelMode.DRIVING
}; Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
