API google map plusieurs tracer

Version imprimable

23/02/2012, 10h24
rami25316

API google map plusieurs tracer

Bonjours,

J'essai de develloper un site web qui afficherai une carte de google avec plusieurs tracer de route entre 2 villes que je vais chercher dans mas bdd (chaque tracer dans une couleur différente).

J'arrive déjà affichez la carte et un tracer mais je n'arrive pas a faire plusieurs tracer et a changer la couleur du tracer.

Merci de votre aide.

Bonjour,
pour modifier la couleur d'un tracé il suffit de modifier la valeur de strokeColor de l'option polylineOptions que tu passes à l'itinéraire
Code:

1 2 3 4 5 6 7 var polyOptions = { 'strokeColor' : '#008000', 'strokeOpacity' : 0.45, 'strokeWeight' : 5 }; oDirect = new google.maps.DirectionsRenderer(); oDirect.setOptions({ polylineOptions: polyOptions});
Pour afficher plusieurs tracés, il ne faut bien évidement ne pas réutiliser la même variable mais mettre tes itinéraires dans un Array.

Merci pour ton aide mais je ne comprends pas comment modifier mon code en conséquence.

J'ai fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
var geocoder;
var directionsDisplay;
var map;
 
$(document).ready(function() {
	geocoder = new google.maps.Geocoder();
	directionsDisplay = new google.maps.DirectionsRenderer();
	var latlng = new google.maps.LatLng(2.20, 48.52);
 
  var myOptions = {
      zoom: 12,
      center: latlng,
	  disableDefaultUI: true,
      navigationControl: true,
      scrollwheel: false,
      navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_RIGHT
      },
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
});
 
function getDistance(dep, arr) {
	var directionsService = new google.maps.DirectionsService();
	$("#estim").hide();
	$(".err-hide").hide();
	$("#estim_wait").show();
	var request = {
		      origin: dep,
		      destination: arr,
		      travelMode: google.maps.DirectionsTravelMode.DRIVING,
		      unitSystem: google.maps.DirectionsUnitSystem.METRIC
		  };

Peux-tu m'expliquer, s'il te plait ?

Citation:
Envoyé par NoSmoking
Code:

1 2 3 4 5 6 7 var polyOptions = { 'strokeColor' : '#008000', 'strokeOpacity' : 0.45, 'strokeWeight' : 5 }; oDirect = new google.maps.DirectionsRenderer(); oDirect.setOptions({ polylineOptions: polyOptions});
que penses tu que font les 2 dernières lignes.

Dans ton exemple l'objet s'appelle directionsDisplay, dans le mien oDirect

Citation:

Envoyé par NoSmoking

que penses tu que font les 2 dernières lignes.

Dans ton exemple l'objet s'appelle directionsDisplay, dans le mien oDirect

Merci pour ton aide NoSmoking mais malgré tous mes effort je n'arrive toujours pas a utiliser ton exemple. J'ai fait ca :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 var geocoder; var directionsDisplay; var map; $(document).ready(function() { geocoder = new google.maps.Geocoder(); directionsDisplay = new google.maps.DirectionsRenderer(); var latlng = new google.maps.LatLng(2.20, 48.52); var myOptions = { zoom: 12, center: latlng, disableDefaultUI: true, navigationControl: true, scrollwheel: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL, position: google.maps.ControlPosition.TOP_RIGHT }, 'strokeColor' : '#008000', 'strokeOpacity' : 0.45, 'strokeWeight' : 5, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); });
Quand je change une des valeur que j'ai ajouter rien ne change . Je ne comprend vraiment pas.

P.S: je suis en 2eme années de BTS IG option dev et je doit admettre que je ne suis pas au top au niveau javascript

tu n'appliques pas les bonnes options au bon objet.
- google.maps.Map défini ta carte qui possède c'est propre options.
- google.maps.DirectionsRenderer défini le rendu d'un trajet qui à également c'est propre options pour l'affichage, c'est cet objet que tu veux modifier.

il te faut donc faire pour la carte
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var carteOptions = { 'zoom': 12, 'center': latlng, 'disableDefaultUI': true, 'navigationControl': true, 'scrollwheel': false, 'navigationControlOptions': { 'style': google.maps.NavigationControlStyle.SMALL, 'position': google.maps.ControlPosition.TOP_RIGHT }, 'mapTypeId': google.maps.MapTypeId.HYBRID }; oMap = new google.maps.Map(document.getElementById("map_canvas"), carteOptions);
et pour ton trajet
Code:

1 2 3 4 5 6 7 var polyOptions = { 'strokeColor' : '#008000', 'strokeOpacity' : 0.45, 'strokeWeight' : 5 }; oDirect = new google.maps.DirectionsRenderer(); oDirect.setOptions({ polylineOptions: polyOptions});
mais ne pas mélanger les deux.

Tu peux d'ailleurs écrire de la même façon que pour la carte

Code:

oDirect = new google.maps.DirectionsRenderer( polyOptions);

et inversement, la méthode setOptions étant applicable au 2 objets.

La doc :fleche: http://code.google.com/intl/fr/apis/...ctionsRenderer