Discussion :

[abel.ludba]

Bonjour
Je rencontre un problème en essayant de regrouper un grand nombre de markeurs avec MarkerClusterer.
Je declare un tableau de markeurs

Code :

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

1
2
var theMarker=[];
var intCounter;

Mes donnees proviennent d'un fichier XML que je lis avec JQuery comme ceci:

Code :

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

1
2
3
4
5
6
7
8
9
 jQuery.get(urlMyXML, {}, function(data) {
  jQuery(data).find("point").each(function() {
   var marker = jQuery(this);
   latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                    parseFloat(marker.attr("lng"))); 
   var monTxt =(marker.attr("name")); 
 
	var theMarker(intCounter)=createMyMarker(latlng,monTxt );
     intCounter=intCounter+1;

Ensuite,

Code :

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

1
2
var theMarker=createMyMarker(latlng,txt);
   	theMarker.push(theMarker);

Puis, je crée une instance de la classe MarkerClusterer

Code :

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

1
2
3
4
5
 
google.maps.event.addListenerOnce(map, 'bounds_changed', function()
{     
var markerclusterer = new MarkerClusterer(map, theMarker);
  });

Mais, ce sont seulement la carte et les memes markeurs de Google qui s'affichent.
Qu'est-ce qui ne va pas dans mon code, quelqu'un aurait une idee?
Merci.
Abel

[NoSmoking]

Bonjour,
je vois des erreurs de syntaxe dans ton code

Code :

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

1
2
var theMarker(intCounter)=createMyMarker(latlng,monTxt );
intCounter=intCounter+1;

Code :

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

var theMarker(intCounter)

ne veux rien dire...

...comme tu as déclaré par avant

Code :

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

1
2
var theMarker=[];
var intCounter;

je présumes que tu souhaites empiler dans un tableau, dans ce cas il te faut mettre

Code :

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

 theMarker[intCounter ++]=createMyMarker(latlng,monTxt );

plus simplement, sans mettre le mot clé var qui dans ce cas redéfinie une variable locale

[abel.ludba]

Salut NoSmoking.

Merci pour ta réponse.

J'ai fait les corrections que tu m'as indiquées, cela fonctionne quand tout le code est groupé dans une seule fonction. Mais, pour les besoins de mon application je dois séparer le code en plusieurs fonctions: une fonction pour la creation de la carte, une autre pour le lecture de XML et une dernière pour creer les markeurs. En faisant cela le code ne fonctionne plus. Je ne vois pas la raison.
Est-ce que si je fais

Code :

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

1
2
3
4
5
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {     
      // Creating a MarkerClusterer object and adding the markers array to it
     var markerclusterer = new MarkerClusterer(map, theMarker);
 
    });

dans une fonction séparée a une influence quelconque?
Merci
Abel

[NoSmoking]

difficile à dire sans le code global pour voir et appréhender l'approche que tu veux mettre en place.

[abel.ludba]

Salut

Voici le code complet de mon fichier JS. Dans cet état il fonctionne.

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
 
// JavaScript Document
 var markers = [];
 var urlMyXML="nancy.xml";
function loadMap()
{
//
    var latlng = new google.maps.LatLng(48.65,6.157);
                var option = {
                    zoom: 3,
                    center: latlng,
					clickable: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map"), option);
 alert("Je vais lire XML");                 
 
  readXML();
 
 google.maps.event.addListenerOnce(map, 'bounds_changed', function() 
 {     
      // Creating a MarkerClusterer object and adding the markers array to it
     var markerclusterer = new MarkerClusterer(map, markers);
 
  });
 
}
//  ...........................................................
 
function readXML()
{
jQuery.get(urlMyXML, {}, function(data) {
  jQuery(data).find("point").each(function() {
   var marker = jQuery(this);
   latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")),
                                    parseFloat(marker.attr("lng")));
 
    marker = new google.maps.Marker({
          position: latlng,
		  icon: "Media/images/National.png"
        });	
     google.maps.event.addListener(marker, 'mouseover', function() {        
 
	   document.getElementById('txt_top').innerHTML = info;
	   }); 
	   //
	 google.maps.event.addListener(marker, 'mouseout', function() {        
 
	   document.getElementById('txt_top').innerHTML = txtDefault;
 
    }); 
   markers.push(marker);						
 
  });
 });	  
}

Avec tes modifications je n’ai pas réussi à le faire fonctionner séparée en plusieurs fonctions. Les Listeners dans la 2eme fonction ne fonctionnent pas dans ce cas alors qu'ils fonctionnent parfaitment dans le cas d'une seule fonction!?
J’aimerais sortir aussi sortir les Listerners et les mettre dans une fonction séparée afin de lui envoyer des informations différentes selon le cas.
Est-ce possible? Je suis ouvert à toute critique et/ou amélioration.
Merci.
Abel

[NoSmoking]

après un regard rapide

Code :

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

1
2
3
4
5
6
7
google.maps.event.addListener(marker, 'mouseover', function() {        
  document.getElementById('txt_top').innerHTML = info;
}); 
 
google.maps.event.addListener(marker, 'mouseout', function() {        
  document.getElementById('txt_top').innerHTML = txtDefault;
});

que valent info et textDefault, si ils ne sont pas définis le script plante

si tu avais un lien pour bénéficier de l'ensemble

[abel.ludba]

Salut NoSmoking
pour ce qui est du

que valent info et textDefault, si ils ne sont pas définis le script plante

textDefault est defini dans un fichier d'initialisation
info: est pris dans un fihcier XML (dont le fichier nancy.xml) qui sont les fihciers de données.
Je vais essayer de trouver un site pour loger les fichiers et t'enverrai cela un peu plus tard.
Merci
Abel

[abel.ludba]

Bonjour NoSmoking
Je ne suis pas parvenu à trouver des sites ou je peux mettre mes fichiers.
Je mes (une partie du projet) ici

Ce que j'aimerais avoir c'est trois fonctions : une qui crée la carte, une qui crée les markeurs et une 3eme qui fait le clustering.
Est-ce possible? En tout cas je n'y suis pas parvenu.

Merci beaucoup

Abel

[NoSmoking]

Ce que j'aimerais avoir c'est trois fonctions : une qui crée la carte, une qui crée les markeurs et une 3eme qui fait le clustering.
Est-ce possible? En tout cas je n'y suis pas parvenu.

j'ai regardé ton code rapidament et déjà une remarque générique

- ne pas oublier de mettre le mot clé var lors de la déclaration des variables
- ne pas utiliser des mots réservés ou faisant partie des éléments reconnus par certains navigateurs, dans ton cas map utlisé comme ID d'une DIV.

bon ceci étant dit, je ne saisi pas trop ta préoccupation.
Créer des fonctions c'est bien mais si elle ne doivent pas être réutilisées cela ne sert à rien, autant tout mettre dans la fonction d'initialisation.

Tu utlises de plus une fonction jQuery qui apparament fonctionne en asynchrone, donc qui ne renvoi pas le résultat immédiatement donc pour la création des marker il te faut bien mettre le code de création ou la fonction appelé dans la fonction de traitement en retour

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
 
function readXML() {
  jQuery.get(urlMyXML, {}, function (data) {
    jQuery(data).find("point").each(function () {
      var marker = jQuery(this);
      latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
      marker = new google.maps.Marker({
        position: latlng,
        icon: "Media/images/National.png"
      });
      google.maps.event.addListener(marker, 'mouseover', function () {
        document.getElementById('txt_top').innerHTML = info;
      });
      //
      google.maps.event.addListener(marker, 'mouseout', function () {
        document.getElementById('txt_top').innerHTML = txtDefault;
      });
      markers.push(marker);
    });
    // creation du MarkerClusterer
    creatMarkerClusterer(); // par exemple
  });
}

une autre solution, je livre un peu en vrac, et d'utiliser un fichier contenant un tableau d'objet au lieu d'un fichier XML, dans ce cas tu pourras peut être plus structurer ton code!!!

[NoSmoking]

je te rajoutes un lien vers un post qui devrait t'intéresser
http://www.developpez.net/forums/d10...t/aide-return/

[abel.ludba]

Salut NoSmoking

Merci pour ta réponse. C'est très OK pour les remarques.

La raison de modulariser et essayer d'avoir plusieurs fonctions c'est que je suis en train de développer une sorte de Tableau de bord avec plusieurs sortes de cartes. J'aimerais donc, ne pas re-écrire les mêmes fonctions qui gèrent la création de markeurs, etc.

Pour ce qui est du fichier XML les données viennent sous ce format. Est-ce que tu me conseilles de les convertir en JSON, par exemple?

J’ai regardé la discussion et j’en tiendrai compte.

Abel

[NoSmoking]

ce qui m'a également surpris et de ne pas voir toutes les infos du fichier XML exploités, mais c'est peut être à dessein!

Rien ne t'empêche de le faire, mais lorsque tu vas créer une nouvelle carte, tu vas lire un fichier XML, ou autre, et créer tes marqueurs donc cette logique peut être contenu dans une même fonction.

La différence peut ce faire en utilisant à bon escient les paramètres passés à la fonction.

[abel.ludba]

Salut NoSmoking

C'est clair.
Merci beaucoup pour tes réponses et conseils.
Bonne find soirée.
Abel