Discussion :

[nico21000]

Bonjour,

Je vais essayé d'être claire.
Je créer une page web ou intègre une carte google map, à l'intérieur de cette carte je veux afficher différents markers provenant de différents fichier xml.
Mais je souhaite en même temps stocker ces markers dans un tableau pour pouvoir interférer sur ceux-ci (par exemple lorsque je vais cocher une case du menu certains markers s'affichent ou s'effacent).

au niveau de mon code ça donne ça en simplifié :

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
        var tab_settings = new Array();
	var i = 0;
 
        //Je vais chercher mes fichiers xml
 	$.post("function.php", { action: "select_kml"},function(data){
 
             //Pour chaque dossier
              for(var x = 0 ; x < data.length ; x++){         	
 
                      //Pour chaque fichier
		      for(var y = 0 ; y < (data[x].file).length ; y++){
 
                            //Je parse le xml en ajax
			    $.ajax({
                                //Pour chaque marker
                                for(var z = 0 ; z < nb_marker_du_fichier ; z++){
                                       //J'affiche le marker
 
                                      //Je créer un nouvel objet dans mon tableau
                                      tab_settings[i] = new Object();
 
                                      //J'insère le marker dans le tableau       
					tab_settings[i].objet = zone;
 
                                       i++;
                                }
 
                                alert(tab_settings.length);
                                //M'affiche à chaque fichier le nombre d'objet que j'ai inséré dans le tableau 	  
			    }});
 
 
                      }
              }
 
	},"json");
 
  alert(tab_settings.length);
  //M'affiche "0";

Je sais que je ne peux pas avoir accès à mes variables créer dans une requête AJAX en dehors de celle-ci, mais je ne vois pas a quel endroit je peux accéder a mon tableau remplit avec tous mes markers.

Je ne sais pas si j'ai été très claire, c'est pas facile à expliquer, si vous voulez d'autre infos demandez moi.

Merci d'avance pour vos réponses.

[Bovino]

Alors perso, je décroche un peu sur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
    //Pour chaque marker
    for(var z = 0 ; z < nb_marker_du_fichier ; z++){
        //J'affiche le marker
        //Je créer un nouvel objet dans mon tableau
        tab_settings[i] = new Object();
        //J'insère le marker dans le tableau       
        tab_settings[i].objet = zone;
        i++;
    }			    	
    alert(tab_settings.length);
    //M'affiche à chaque fichier le nombre d'objet que j'ai inséré dans le tableau 	  
}});

C'est sensé faire quoi ça ??? Tu fais une multitude d'appels AJAX avec comme paramètre d'URL une boucle ?

[nico21000]

Ba non mais en fait je me suis dit que de simplifier le code et de ne pas tous mettre ça serais plus digeste c'est tous.

Voila 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
 
$(document).ready(function() {
 
		var tab_settings = new Array();
 
		var i = 0;
 
        //Initialisation de la carte.
        var map = new GMap2(document.getElementById("map"),{mapTypes: [ G_SATELLITE_MAP]});
        map.setUIToDefault();
        map.setCenter(new GLatLng (47.3273738, 4.9989319), 14);
	    map.enableScrollWheelZoom();	
																		// Autorise le zooming avec la molette d'une souris 
 
		//On va chercher la liste des fichier kml.
       	$.post("function.php", { action: "select_kml"},function(data){
         	var tab_menu = new Array();
 
    		//Pour chaque dossier.
       		for(var x = 0 ; x < data.length ; x++){
       			tab_menu[x] = new Array();
       			tab_menu[x]['nom'] = (data[x].nom).substr(4);
       			tab_menu[x]["file"] = new Array();
				//Pour chaque fichier.
				for(var y = 0 ; y < (data[x].file).length ; y++){
					tab_menu[x]["file"][y] = new Array();
					tab_menu[x]["file"][y]["name"] = (data[x].file[y]).substr(4);
 
 
 
					//Contourner les problemes avec IE.
					$.ajax({
			    		 url: 'kml/'+data[x].nom+"/"+data[x].file[y],
			    		 dataType: ($.browser.msie) ? "text" : "xml",
			    		 timeout: 1000,
			    		 error: function(data){
			    		  location.reload();
			    		 },
			    		 success: function(data){
			    		  var xml;
			    		  if (typeof data == "string") {
			    		   xml = new ActiveXObject("Microsoft.XMLDOM");
			    		   xml.async = false;
			    		   xml.loadXML(data);
			    		  } else {
			    		   xml = data;
			    		  }
							//On commence à parser.
 
							   		var tab_zones = new Array();
									var x = 0;   		
									//Pour chaque "Polygone"
						     		$(xml).find("Polygon").each(function(){ 
										var name = $(this).prev().prev().prev().text();				//On récupère le nom.
							    		var style = $(this).prev().text();							//On récupère le style.
							    		style = style.substr(1,style.length-1);						//On formate le style.
							    		tab_zones[x] = new Array();
							    		tab_zones[x]['name'] = name;								//On stock le nom.
							    		tab_zones[x]['style'] = style;								//On stock le style.
 
							    	  	var color;
							     		$(xml).find("Style").each(function(){
							     			if($(this).attr('id') == style){
							     				color = $(this).children().find('color').text();	//On récupère la couleur.
							     			}
							     		});
 
							     		color = color.substr(10,6);									//On formate la couleur.
							     		var r = color.substr(4,2);
							     		var g = color.substr(2,2);
								     	var b = color.substr(0,2);
								     	color = r+g+b;
 
							     		tab_zones[x]['color'] = color;								//On stock la couleur.
 
						    			tab_zones[x]['coords'] = new Array();						
							    		var coords = $(this).find("coordinates").text();			//On récupère les coordonnées des points des polygones.
 
							    		coords = coords.split('0.000000');
							    		coords.pop();
 
										//Pour chaques points.
							    		for(var y = 0 ; y < coords.length ; y++){
											var coord = coords[y];
											coord = coord.substr(0,coord.length-1);
											coord = coord.split(',');
											tab_zones[x]['coords'][y] = new Array();
											tab_zones[x]['coords'][y]['lat'] = coord[0];							//On stock la latitude.
											tab_zones[x]['coords'][y]['long'] = coord[1]; 							//On stock la longitude..
										}	
							        	x++;
							         });
 
						     		//Pour chaque polygone.
 
									for(var x = 0 ; x < tab_zones.length ; x++){
										var zone = creer_zone(tab_zones[x]);										//On lance la fonction qui créer le polygone.
 
										map.addOverlay(zone);														//On affiche ce polygone.
 
 
										tab_settings[i] = new Object();
										tab_settings[i].objet = zone;
									//	tab_settings[i].file = data[x].nom+"/"+data[x].file[y];
										tab_settings[i].status = true;
 
										i++;								
									}
 
					       			 //Pour chaque marker
					       			 var tab_points = new Array();
					       			 var x = 0;
							        $(xml).find("Point").each(function(){
							        	var name = $(this).prev().prev().prev().text();						//On récupère le nom.
										var description = $(this).prev().prev().text()
								    	var style = $(this).prev().text();									//On récupère le style.
								    	style = style.substr(1,style.length-1);								//On formate le style.
 
										tab_points[x] = new Array();
							    		tab_points[x]['name'] = name;								//On stock le nom.
							    		tab_points[x]['style'] = style;								//On stock le style.
										tab_points[x]['description'] = description;
 
							    		var icone;
										$(xml).find("Style").each(function(){
							     			if($(this).attr('id') == tab_points[x]['style']){
							     				icone = $(this).children().find('href').text();	//On récupère la couleur.
							     			}
							     		});
 
										var myIcon = new GIcon(G_DEFAULT_ICON, icone); 						// Déclaration de notre icône personnalisée avec l'image arrow_bg_inv.png
										   myIcon.iconSize = new GSize(32,32);								 // Redimensionnement de l'icône (35*35)
										   myIcon.dragCrossSize = new GSize(32,32);							// Redimensionnement de la croix située sous le marker
										  																	 // pendant son déplacement (32*32)
										  myIcon.imageMap = new Array(0, 0, 0, 32, 32,32, 32, 0);			 // Déclaration de la zone réactive sur le marker
										  myIcon.shadow = '';												// Ici, le marker n'aura pas d'ombre
										//  myIcon.iconAnchor = new GPoint(26,1);							 // Le point d'accroche de l'icône représentant le marker
										 																   // sera décalé de 26px vers la gauche et de 1px vers le haut
										var coords = $(this).find("coordinates").text();			//On récupère les coordonnées des points du marker.
										coords = coords.split(',');
							    		coords.pop();
							    		tab_points[x]['lat'] = coords[0];
							    		tab_points[x]['long'] = coords[1];							//On stock les coordonnées.
 
							    		var LatLng = new GLatLng(tab_points[x]['long'], tab_points[x]['lat']);
							    		var marker = new GMarker(LatLng,myIcon);
										var text = tab_points[x]['name']+"<br/>"+tab_points[x]['description'];
							    		GEvent.addListener(marker,"click", function(point) {     
 
											  map.closeInfoWindow();
											    map.openInfoWindowHtml(point,text);
											});
										GEvent.addListener(marker,"mouseover", function(){
 
										});
							    		map.addOverlay(marker);
 
										tab_settings[i] = new Object();
 
										tab_settings[i].objet = marker;
									//	tab_settings[i].file = data[x].nom+"/"+data[x].file[y];
										tab_settings[i].status = true;	
 
										i++;
									x++;
									}); 
 
 
 
 
			    		}});
 
 
 
 
 
					  alert(tab_settings.length);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
				}	
       		}
 
	   		//createMenu(tab_menu);
	   		//createTreeview(test);
 
		},"json");
 
 
		function createMenu(tab){
		var html = '<ul id="red" class="treeview">';
			for(var x = 0 ; x < tab.length ; x++){
 
				html += '<li id="'+tab[x]['nom']+'"><span>'+tab[x]["nom"]+'</span>';
				html += '<ul>';
 
				for(var y = 0 ; y < tab[x]["file"].length ; y++){
					var nom = tab[x]['file'][y].substr(0,(tab[x]['file'][y].length)-4);
 
					html += '<li id="'+nom+'"><span>'+nom+'</span></li>'
				}
 
				html += '</ul>';
				html += '</li>';
			}
 
			html += '</ul>';
 
			$('#legend').append(html);
		}
 
		function createTreeview(test){
			$("#red").treeview({
				animated: "fast",
				collapsed: true,
				unique: false,
				teste: test,
				persist: "cookie",
				toggle: function() {
					window.console && console.log("%o was toggled", this);
				}
			});
		}
 
 
 
 
        	//Fonction de création d'un polygone.
     		  function creer_zone(zone){
 
						var latlngs = new Array();
						for(var y = 0 ; y < zone['coords'].length ; y++){
							latlngs.push(new GLatLng(zone['coords'][y]['long'],zone['coords'][y]['lat']));
						}
 
						var texte = zone['name']; 
						var monpolygone = new GPolygon(latlngs, "#"+zone['color'], 2, 0.5, "#"+zone['color'], 0.5);
 
 
						GEvent.addListener(monpolygone,"click", function(point) {     
 
							  map.closeInfoWindow();
							    map.openInfoWindowHtml(point,texte);
							});
						GEvent.addListener(monpolygone,"mouseover", function(){
 
						});
 
					return(monpolygone);
     	   		}
 
 
 
 
    });

Le truc c'est que c'est le chantier.

[Bovino]

Oui, c'est sûr que là ça demande du temps à décortiquer

Ceci dit, dans un premier temps, tu commets quand même selon moi quelques erreurs de conception :
* tu fais une boucle for sur le retour de ta première requête et dans cette boucle, tu lances de multiples autres requêtes. Sachant qu'habituellement, seules trois requêtes simultanées sont autorisées, tu risques de vite atteindre cette limite, d'autant qu'au retour de chacune de ces requêtes, tu retournes sur le serveur pour IE chercher les XML.
Il me semble que Google Maps autorise de lui fournir directement un XML avec plusieurs KML.
D'autre part, demande toi si ce ne serait pas plus simple de faire toutes ces demandes depuis le serveur et de ne retourner que le XML (ou un JSON) avec l'ensemble de tes données.
* Dans tes boucles, tu utilises des variables de boucles, or autant tu peux savoir l'ordre dans lequel partent tes requêtes, autant il est impossible de prévoir l'ordre de retour et encore moins la valeur des variables de boucle au moment où tu les utilises.
Il est donc préférable dans ce cas d'affecter une propriété (ou variable) dans la boucle afin d'être sûr que sa valeur ne changera pas.

[nico21000]

Merci d'être aussi rapide et merci pour tes conseils.

Je me disais bien que ça commençais à être le gros bordel dans mon code.
Je n'ai pas très bien compris la deuxième partie de ton message :

Il est donc préférable dans ce cas d'affecter une propriété (ou variable) dans la boucle afin d'être sûr que sa valeur ne changera pas.

Si tu pouvais me mettre un exemple de se que tu veux m'expliquer ça serais cool.

Sinon, pour la première partie c'est bien se que je craignait, je vais essayer de regrouper tous mes kml en un seul fichier.
Tu me conseil de le faire au lancement de ma page en php, c'est ça (côté serveur) ?
Comment le mettre en place ?

[Bovino]

Il y a un exemple dans la FAQ : Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?