Google Maps addListener et Jquery comportement étrange

Question

C'est bizarre, peut-être quelqu'un peut m'expliquer pourquoi cela se produit.

Si j'utilise le for mis en commentaire à la place du .each() alors chaque marqueur affiche l'information du dernier storeObj quand on clique dessus. Cependant, il semble en utilisant le .each() son bon. Tous les marqueurs sont des endroits où ils devraient être sur l'un ou l'autre, c'est juste l'écouteur de clic.

PS: Si vous voulez que le code source complet puis il suffit de visiter l'adresse suivante: http://tinyurl.com/38x6yfe

 //for(index=0; index < store_array.length; index++) { 
     $(store_array).each(function(index, this_store){ 
      //name address address2 csz state phone lng lat accuracy brands 
      // 0  1  2   3 4  5  6  7  8   9 

      /* 

      use this for FOR statement 
      var name = store_array[index][0] 
      name = name.replace(/\&/g,'&amp;'); 
      var address = store_array[index][1]; 
      var address2 = store_array[index][2]; 
      var csz = store_array[index][3]; 
      var state = store_array[index][4]; 
      var phone = store_array[index][5]; 
      var lng = store_array[index][6]; 
      var lat = store_array[index][7]; 
      //var accuracy = store_array[index][8]; 
      var brands = store_array[index][9]; 
      */ 

      var name = this_store[0] 
      name = name.replace(/\&/g,'&amp;'); 
      var address = this_store[1]; 
      var address2 = this_store[2]; 
      var csz = this_store[3]; 
      var state = this_store[4]; 
      var phone = this_store[5]; 
      var lng = this_store[6]; 
      var lat = this_store[7]; 
      //var accuracy = this_store[8]; 
      var brands = this_store[9]; 



      var latlng = new google.maps.LatLng(lat, lng); 

      var storeObj = new google.maps.Marker({ 
       position: latlng, 
       icon: gicons[brands], 
       shadow: iconShadow, 
       map: G_MAP, 
       visible: false, 
       title: name, 
       zIndex: Math.round(lat * -100000) << 5 
      }); 

      storeObj.id = index; 
      storeObj.name = name; 
      storeObj.state = state; 
      storeObj.brands = brands; 

      //add this store into the stores array 
      G_STORES_ARRAY.push(storeObj); 


      console.log('index =' + index + ' name = ' + name + ' storeObj = '); 
      console.log(storeObj); 


      //create a listener for each store 
      google.maps.event.addListener(storeObj, 'click', function() { 
       //G_MAP.setCenter(latlng); 


       console.log('index =' + index + ' name = ' + name + ' storeObj = '); 
       console.log(storeObj); 

       var contentString = "<b>" + name + "<\/b><p>" + address + "<p>" + csz+ "<p>" + phone; 

       var urlstring = encodeURIComponent(name+' '+address+' '+csz); 
       contentString += '<br><a href="http://maps.google.com/?q='+urlstring+'" target="_blank">Directions</a>'; 
       contentString += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(13);">Zoom To</a>'; 
       contentString += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())+1);">[+]</a>'; 
       contentString += ' - <a href="javascript:G_MAP.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); G_MAP.setZoom(parseInt(G_MAP.getZoom())-1);">[-]</a>'; 


       G_INFOWINDOW.setContent(contentString); 
       G_INFOWINDOW.open(G_MAP, storeObj); 
      }); 

      google.maps.event.addListener(storeObj, 'mouseover', function() { 
       storeObj.setIcon(gicons["none"]); 
      }); 

      google.maps.event.addListener(storeObj, 'mouseout', function() { 
       storeObj.setIcon(gicons[storeObj.brands]); 
      }); 
     }); 
    }); 

Answer 1

Pour comprendre pourquoi cela se produit, vous voulez lire sur les fermetures en javascript. Voici une API Google Maps spécifique example, un description plus officiel, et un explanation de la façon dont ils sont implémentés dans la fonction .each() de jQuery