javascript - 複数のマーカーの奇妙なクリックの問題: Google Map API

Question

次のコードを使用して、複数のマーカーを実装できます。

<?php foreach($dummy as $cid=>$data)
{   ?>
    var myLatlng = new google.maps.LatLng(<?php echo $data['lat']; ?>,<?php echo $data['lon']; ?>); 
    var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: "<?php echo $data['name']; ?>"
    });
    icons[j] = marker;
    maps[0] = map;    
    j++;
<?php  
}   
?>  
for(var i = 0; i < icons.length; i++)
{       
   google.maps.event.addListener(icons[i], 'click', function(){
    markerClick(icons[i], maps[0]); // this is the problem area
    // markerClick(icons[0], maps[0]); // this works
    // markerClick(icons[1], maps[0]); // so does this
   });  
}   

function markerClick(marker_argument, map){     
    console.log(marker_argument);        
 }

問題はgoogle.maps.event.addListener関数にあります。この変数を使用すると、iundefinedがmarkerClick()返さconsole.log()れます。ただし、ハードコードされた値 (1、2、または 3) を使用すると、マーカー オブジェクトが返されます。console.log()

困惑するのは、ループ変数を使用すると引数が渡されないのにi、値をハードコーディングすると機能する理由です。ここで何が欠けていますか？

Answer 1

.addListenerループを JavaScript クロージャでラップすると、動作するはずです!