2010-02-24 8 views
3

Je souhaite ajouter un événement Listener à chaque marqueur généré, de sorte que lorsque vous cliquez sur un marqueur, vous êtes redirigé vers l'URL du lien permanent. Avec le code ci-dessous, la valeur de permalink est la même pour chaque marqueur (c'est la dernière valeur). J'ai lu sur les problèmes de fermeture et cela semble être ce que j'ai. Je ne comprends pas vraiment les exemples que j'ai examinés. Est-ce que quelqu'un peut regarder mon code et me diriger dans la bonne direction? Toute aide est grandement appréciée!Problème de fermeture avec les marqueurs Listener et Google Maps

downloadUrl("http://localhost/map/generatexml.php", function(data) { 
      var xml = parseXml(data); 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
       var permalink = markers[i].getAttribute("permalink"); 
       var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")), 
        parseFloat(markers[i].getAttribute("lng"))); 
       var marker = new google.maps.Marker({map: map,position: point,icon: icon.icon,shadow: icon.shadow,title: name}); 
       google.maps.event.addListener(marker, 'click', function() {self.location.href = permalink;}); 
      } 
+3

Ceci est l'un des questions les plus courantes et répétitives concernant les fermetures impliquant des boucles, des dupes possibles: http://stackoverflow.com/questions/1734749 http://stackoverflow.com/questions/643542 http://stackoverflow.com/questions/1582634 http: // stackoverflow.com/questions/1331769 http: //stackoverflow.c om/questions/1552941 http://stackoverflow.com/questions/750486 http://stackoverflow.com/questions/933343 http://stackoverflow.com/questions/1579978 http://stackoverflow.com/questions/1413916 http://stackoverflow.com/questions/2314175 – CMS

+0

Désolé de poser une autre question de clôture, mais j'ai regardé à travers un tas de réponses précédentes et je ne pouvais tout simplement pas le faire fonctionner. Merci pour les liens! –

Répondre

11

Essayez ceci:

for (var i = 0; i < markers.length; ++i) { 
    // ... like what you have already ... 
    (function(permalink) { 
    google.maps.event.addListener(marker, 'click', function() {self.location.href = permalink;}); 
    })(permalink); 
} 

En faisant une nouvelle portée lexicale une copie de la valeur « permalien » à chaque itération, vos gestionnaires doivent travailler meilleur.

+0

Pourquoi avais-je du mal à trouver une solution aussi simple? Je suis jaloux – Bob

+0

Merci Pointy, j'ai essayé de faire fonctionner ça pendant des heures. Votre code a fonctionné et vous êtes mon héros! –

2

JavaScript n'a que la portée de la fonction, donc quand vous déclarer var est au milieu de la boucle for vous êtes en fait que les déclarer une fois pour l'ensemble de la fonction. La première chose que vous devez faire est d'utiliser toutes les déclarations var vers le haut pour faire un peu plus de sens de ce qui se passe:

downloadUrl("http://localhost/map/generatexml.php", function(data) { 
      var xml = parseXml(data); 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      var i, permalink, point, marker; 
      for (i = 0; i < markers.length; i++) { 
       permalink = markers[i].getAttribute("permalink"); 
       point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")), 
        parseFloat(markers[i].getAttribute("lng"))); 
       marker = new google.maps.Marker({map: map,position: point,icon: icon.icon,shadow: icon.shadow,title: name}); 
       google.maps.event.addListener(marker, 'click', function() {self.location.href = permalink;}); 
      } 

Votre fonction clic utilisera la valeur finale de permalien pour chaque événement marqueur depuis permalien sera remplacé avec une nouvelle valeur à chaque fois que les boucles for-loop. Edit: Alors ouais, Pointy m'a battu pour résoudre votre problème. Mais là, vous avez, au moins, une explication du problème

+0

Merci Bob de m'aider, vous êtes génial :) –

1

Nous devons utiliser des fermetures pour résoudre ce problème

Utilisez l'extrait de code ci-dessous pour ajouter la fenêtre d'information au marqueur

function AddInfoWidnow(marker,message) 
{ 
    var infowindow = new google.maps.InfoWindow({ content: message }); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.open(marker.get('map'), marker); 

    }); 

} 

Pour voir un exemple de travail, voir here

Questions connexes