Broken JS Loop avec Google Maps

Question

Mon code est ci-dessous, et j'ai eu un problème avec presque le même code, et il a été corrigé ici sur StackOverflow, mais, encore une fois, son ne fonctionne pas. Je n'ai pas changé le code de travail, mais je l'ai enveloppé dans la boucle for...in que vous verrez ci-dessous. Le problème est que peu importe le marqueur sur lequel je clique, il déclenche toujours le dernier marqueur/infoWindow qui a été placé.

$(function(){ 
    var latlng = new google.maps.LatLng(45.522015,-122.683811); 
    var settings = { 
     zoom: 10, 
     center: latlng, 
     disableDefaultUI:true, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
    $.getJSON('api',function(json){ 
     for (var property in json) { 
      if (json.hasOwnProperty(property)) { 
       var json_data = json[property]; 
       var the_marker = new google.maps.Marker({ 
        title:json_data.item.headline, 
        map:map, 
        clickable:true, 
        position:new google.maps.LatLng(
         parseFloat(json_data.item.geoarray[0].latitude), 
         parseFloat(json_data.item.geoarray[0].longitude) 
        ) 
       }); 
       var infowindow = new google.maps.InfoWindow({ 
        content: '<div><h1>'+json_data.item.headline+'</h1><p>'+json_data.item.full_content+'</p></div>' 
       }); 
       new google.maps.event.addListener(the_marker, 'click', function() { 
        infowindow.open(map,the_marker); 
       }); 
      } 
     } 
    }); 
}); 

Merci pour votre compréhension!

Answer 1

Qu'est-ce qui se passe est que lorsque vous créez chacun de vos fermetures de gestionnaire d'événements (fonctions):

new google.maps.event.addListener(the_marker, 'click', function() { 
    infowindow.open(map,the_marker); 
}); 

... ils reçoivent chacun une référence durable à la the_marker variable pas sa valeur au moment où la fermeture est créée. Toutes les copies de cette fonction de fermeture utilisent donc la même valeur (la dernière valeur qui lui est affectée dans la boucle). Les fermetures ne sont pas compliquées (more here), mais disons que vous n'êtes pas la première personne à faire cette erreur. :-) C'est très facile à faire.

donc ce que vous voulez faire est de capturer la valeur de the_marker à cette itération de la boucle, qui est facile à faire:

new google.maps.event.addListener(
    the_marker, 
    'click', 
    buildHandler(map, the_marker)); 

function buildHandler(map, marker) { 
    return function() { 
     infowindow.open(map, marker); 
    }; 
} 

Là, nous avons une fonction qui construit le gestionnaire en utilisant les arguments passés dans la fonction, et nous appelons cette fonction à chaque itération de boucle pour créer notre gestionnaire pour nous.

This answer à une autre question sur SO peut vous aider à visualiser comment les fermetures ont accès aux variables.