Discussion :

[franz_smith]

Bonjour à tous,

Je code un petit programme qui affiche sur une carte le parcours d'un véhicule via des coordonnées latitude/longitude.
Jusqu'ici aucun problème en soit, j'arrive sans problème à afficher le parcours "manuellement", le problème c'est quand je cherche à "automatiser" le programme.

Je m'explique : Je récupère mes coordonnées via une requête sur ma base de données, or chaque véhicule n'a pas le même nombre de couple latitude/longitude et j'ai donc cherché à faire en sorte que le programme s'adapte au nombre de couple.

Et la ça ne marche plus, il ne m'affiche plus que le premier couple et le dernier. Les autres ont disparu.

Voilà le code :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
      <?php echo "var tab_lat = '".implode("<>", $resultat_lat)."'.split('<>');"; ?>
      <?php echo "var tab_lng = '".implode("<>", $resultat_lng)."'.split('<>');"; ?>
 
      var map;
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var directionDisplay2;
      var directionsService2 = new google.maps.DirectionsService();
 
 
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var depart = new google.maps.LatLng(parseFloat(tab_lat[0]),parseFloat(tab_lng[0]));
        var myOptions = {
          zoom:5,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: depart,
          streetViewControl: false,
          mapTypeControl: false,
          panControl: false,
          scrollwheel: false
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map);
 
        calcRoute();
 
        for(i = 2; i < tab_lat.length ; i++) {
            calcRoute2();
          }
      }
 
      	function calcRoute() {
 
        	var request = {
          		origin:{lat: parseFloat(tab_lat[0]), lng: parseFloat(tab_lng[0])}, 
          		destination:{lat: parseFloat(tab_lat[1]), lng: parseFloat(tab_lng[1])},
          		travelMode: google.maps.DirectionsTravelMode.DRIVING
        	};
        	var polylineOp = {
          		strokeColor:"blue" 
          	};
        	var renderOptions = {
          		polylineOptions : polylineOp
        	}; 
 
        	directionsDisplay = new google.maps.DirectionsRenderer(renderOptions);
 
        	directionsDisplay.setMap(map);
 
        	directionsService.route(request, function(response, status) {
          		if (status == google.maps.DirectionsStatus.OK) {
            		directionsDisplay.setDirections(response);
          		}
        	});
      	}
 
 
      function calcRoute2() {
 
        var request = {
          origin:{lat: parseFloat(tab_lat[i-1]), lng: parseFloat(tab_lng[i-1])}, 
          destination:{lat: parseFloat(tab_lat[i]), lng: parseFloat(tab_lng[i])},
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        var polylineOp = {
          strokeColor:"blue" // la couleur de la route : rouge
        };
        var renderOptions = {
          polylineOptions : polylineOp
        }; 
 
        directionsDisplay2 = new google.maps.DirectionsRenderer(renderOptions);
 
        directionsDisplay2.setMap(map);
 
        directionsService2.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay2.setDirections(response);
          }
        });
      }

J'utilise l'api Google Map.
J'ai encore un peu de mal avec la façon dont les fonctions interagissent entre elles, je pense d'ailleurs que le problème vient de là, mais malgré mes recherches et mes multiples tentatives, je ne vois pas le bout du tunnel.

[mathieu]

les 2 fonctions calcRoute et calcRoute2 se ressemble donc il vaut mieux factoriser le code

ensuite si tu utilises seulement le code à un endroit, tu n'es pas obligé d'utiliser une fonction, tu peux directement mettre le code dans la boucle

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
38
39
40
41
42
 
function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var depart = new google.maps.LatLng(parseFloat(tab_lat[0]),parseFloat(tab_lng[0]));
	var myOptions = {
		zoom:5,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: depart,
		streetViewControl: false,
		mapTypeControl: false,
		panControl: false,
		scrollwheel: false
	}
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);
 
	for(i = 1; i < tab_lat.length ; i++) {
 
		var request = {
		  origin:{lat: parseFloat(tab_lat[i-1]), lng: parseFloat(tab_lng[i-1])}, 
		  destination:{lat: parseFloat(tab_lat[i]), lng: parseFloat(tab_lng[i])},
		  travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		var polylineOp = {
		  strokeColor:"blue" // la couleur de la route : rouge
		};
		var renderOptions = {
		  polylineOptions : polylineOp
		}; 
 
		directionsDisplay2 = new google.maps.DirectionsRenderer(renderOptions);
 
		directionsDisplay2.setMap(map);
 
		directionsService2.route(request, function(response, status) {
		  if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay2.setDirections(response);
		  }
		});
 
	}
}

après, si tu trouves que le code est plus clair avec une fonction, tu peux réorganiser le code. l'important est que si tu revois ce code dans quelques mois, il faut qu'il soit clair à comprendre