Discussion :

[franklin19]

Bonjour,
j'ai un probleme avec mes cluster;
en effet mon programme consiste à recuperer dynamiquement des les latitudes et longitudes dans ma base de données.
Probleme : lorsque j'ai deux marker ayant des coordonnées identique ou presque identique, mes cluster se bloquent.
alors comment puis je resoudre ce probleme?
comment puis-je créer des tabulations sur une infobulle pour deux cordonnées presque identiques?

[Auteur]

bonjour,

peux-tu nous poster du code pour que l'on comprenne un peu mieux ton problème.
Personnellement je ne vois pas trop le lien entre ta base de données et la présentation du résultat dans une info-bulle....

[franklin19]

// dans cette fonction j'ai un tableau que j'appele "tab" qui a me donne les cordonées du marker et j appele la fonction creation marker qui me permet de créer mes markers.
chaque marker a son infobulle.
par ailleurs j 'ai un markercluster pour le regroupement des mes markers;
le probleme que je rencontre est situé sur mes cluster en fait; quand je clique sur mes cluster, je me rend compte que certains cluster (ceux ayant moins de 3 markers) ne s ouvrent pas au click.
j'ai donc pensé que c est parce que les markers sont à des positions identiques.

je souhaite en effet contourner ce probleme.
j ai vu sur certain site qu'un marker pouvait avoir une infobulle avec des tabulations, je pense pour ma part que ces tabulations sont les contenus issus points geograpgiques identiques.

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
 
 
var tab =<?php echo $js; ?>;
			var table =<?php echo $js2; ?>;
			var markers = []; 
			var i;
			var carte;	
function initialiser(ville) 
			{						
				CreationCarte(table[0][0],table[0][1]);
				for( i = 0; i < tab.length; i++) 
				{// Définition de la position du pointeur 
					if((tab[i][6])&&(tab[i][7]))
					{
						CreationMarker(tab[i][6],tab[i][7]);
					}
				}
				var markerCluster = new MarkerClusterer(carte, markers); 
				google.maps.event.addListener(markerCluster, 'clusterclick',
				function(cluster) {
				('creationmarker');
					var clickedMakrers = cluster.getMarkers();
					// alert(cluster.getMarkers().length);
				});
				showVille(1,ville);
			}

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
 
function CreationMarker(lati, longi)
			{			
			    var d = tab[i][1];
				var sous_chaine=troncature(d,90);
 
                 // sous_chaine = 
				var point = new google.maps.LatLng(lati, longi);		
				/**************** Définition des options du marqueur*******/
				optionsMarqueur = 
				{
					position: point,
					map: carte,	
					icon: tab[i][10],
					title: tab[i][1]
				};
				// Création du marqueur
				marqueur = new google.maps.Marker(optionsMarqueur);
 
				markers.push(marqueur);	
				// Définition du contenu de l'infobulle<img src="' + tab[i][9] + '" title="Logo Fournisseur" style=" width:30px;height: 30px;" />
				contentString =
 
								    '<div class="text_infobulle"  >'+
								         ' <img src="' + tab[i][4] + '" height="80px"><a href="deal-'+tab[i][11]+'-'+tab[i][0]+'-'+tab[i][12]+'" title="'+tab[i][1]+'"><b> '+sous_chaine+'...</b></a></br> '+
										 '<span id= nouveau_prix>' +tab[i][3]+'&euro;</span> au lieu de <span id="ancien_prix"> '+tab[i][2]+'&euro;</span></br>'+
										'<a href="deal-'+tab[i][11]+'-'+tab[i][0]+'-'+tab[i][12]+'" title="'+tab[i][1]+'">Plus d\'infos ></a>'+
										'<span class="img_infobulle"><img src="' + tab[i][9] +'" height="20px"></span>'+
										'</div>';
 
 
 
				// Création de l'infobulle
				var infowindow = new google.maps.InfoWindow	({
					content: contentString,
					position: point,
 
 
				});
 
				// Association de l'infobulle au marqueur
				marqueur._infowindow = infowindow;
 
				// Création de la fonction Clic
				google.maps.event.addListener(marqueur, 'click', function ()
				{  alert(infowindow.position);
					//alert('appel ouverture ok');
					//call_fermeture(this);
 
					if(marqueur_courant){
						//alert('ici ok');//alert(marqueur_courant);
						marqueur_courant._infowindow.close();
					}
					/**/
					marqueur_courant = this;
					// ! IMPORTANT on utilise this et non pas marqueur
					this._infowindow.open( carte, this);
				});
			}

[franklin19]

Donc pour me resumer, le probleme en effete c est pas ma base de données mes les markers ayant des point geographiques identiques.
car mes cluster apparament ne s'ouvrent pas pour ces points.
etant donc donnée qu une infowindows a un" content". comment gerer le fait d avoir une infowindow avec une "content" pouvant m'afficher le contenu des markers ayant des positions identiques?
pour ma part j ai pensé aux tabulations, si c est la bonne idée je ne sais pas comment le concevoir
merci

[franklin19]

en effet je pense pouvoir resoudre mon probleme en créant un tableau qui va contenir mes differents points que je vais appelé point, et le point etant un objet qui aura pour proprieté les cordonnées du point ainsi que le contenu de l'infobule qui sera associé au marqueur portant ses cordonnées.

Ainsi je crée une nouvelle boucle qui teste les points ayant des cordonnées identiques je recupere leur contenu et je le concatene , cela me permet de metre mes points dans un nouveau tableau que je considere comme mon tableau de cri, ainsi j'aurais dans ce nouveau tableau les markers sans doublon des cordonnées mais avec le contenu concatené.
celà me permetra plus tard d afficher mes markers, tout en ayant des infobulles avec plusieurs onglets ( et chaque onglet est le contenu d'un" marker ") et les infobulles sans onglet sont ceux dont les markers ne resultent pas de plusierurs markers aux cordonnées identiques.

[franklin19]

le fichier joint sur la discussion ci-desssus est celui de l objectif à atteindre, alors je voudrais bien savoir si ma conception est la bonne ? ou alors y a t il une facon plus propre de resoudre ce probleme?
merci

[franklin19]

bonjour!
suite à mon problème concernant l'affichage des onglets sur les infobulles.
je suis sur une piste de solution:


j'ai créé deux fonctions:
-function tablatlong (tab):
* une qui me permet de créer des objets "point" qui ont pour proprieté" cordonée,et le contenu du Div à afficher dans l'infobulle."

* ces objets je les inserres dans un tableau que j'appele tableau_point qui est une variable globale.


probleme. lorsque j appele ce tableau dans ma seconde fonction
-function tab_point_trie(tableau_point). ehh bien lorsque je veux parcourir le tableau "tableau_point" dans cette seconde fonction dans un boucle for, je ne recois qu une seul cordonnéé plusieurs fois, mais le m^me tableau dans sa fonction de création m affiche toutes les cordonnées à quoi celà est dû ??
merci

mes deux fonctions:

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
 
function tablatlong (tab)
			{    var points = new Object(); 
				 for (i=0;i<tab.length;i++)
				 {  
					var point = new google.maps.LatLng(tab[i][6],tab[i][7]);
					var contentString =
								   '<div id="conteneurInfoBulle">' +
										   '<h1>' + tab[0][0] + '</h1>' +
										   '<h2>Entreprise : ' + tab[0][0] + '</h2>' +
									   '<div id="texteInfoBulle">' +
										   '<div id="lettrineImage"><img src="' + tab[0][3] + '" title="Logo Entreprise" />' +
										   '</div>' + tab[0][0] +
									   '</div>' +
								   '</div> ';
                        points.cordonnee=point;
				        points.value=1;
						points.contenu=contentString
 
						tableau_point.push(points);
 
						/* for (var i in tableau_point)
                            {
                              alert(tableau_point[i].cordonnee);
					      } */
 
				}
			}
		  function tab_point_trie(tableau_point)
				{
				      for (var i in tableau_point)
                            {
                              alert(tableau_point[i].cordonnee);
					      } 
 
 
						for(i=0;i<tableau_point.length;i++)
						   { 	
 
						      /* alert('ok'); */
						         if(table[i])
									{ /*  alert('hi'); */
									     tab_point_tri.push(table[i]); 
										for(j=i;j<table.length;j++)
											{  /* alert(table.length); */
											/* alert(tab_point_tri[i].cordonnee); */
												if(table[j])
												   { /* alert(table[i].cordonnee); */
												    /* alert('bonjour'); */
													  if(table[j+1])
													   {  /* alert('salut'); */
														  if(table[j].cordonnee=table[j+1].cordonnee)
															  {
 
																	 table[i].contenu= table[i].contenu + table[j+1].contenu;  
																	 table[j+1]=null;
																	 table[i].value=table[i].value+1;  
															  }	
														}	  
													}  
											}		
									}	
 
                            }
 
 
				}