Discussion :

[rami25316]

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.

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[rami25316]

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

J'ai fais ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[NoSmoking]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[rami25316]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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