javascript - 谷歌地图信息窗口出现在一个 Angular 落

Question

这是我在 html 中生成标记和信息窗口的代码(使用 ruby​​ on rails)

 var marker=[]
   function initMap() {

     var latLng1 = new google.maps.LatLng(1.352083, 103.819836);
     var myOptions = {
         zoom: 12,
         center: latLng1,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

     for(i=0;i<gon.astatic.length;i++){


      var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]);
       if(i<2){
       marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerV.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});}
       else
       {
      marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerN.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});
       }


     var iw =new google.maps.InfoWindow({content: 'HI' });
     google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})

     }

这个 gon 只是我用来将数据从 ruby​​ on rails Controller 传递到 javascript 的一些“愚蠢”方法。

对于所有标记，信息窗口都出现在 Angular 落。但是对于我的另一张 map (只有一个带有信息窗口的标记)，它工作正常。

我的问题可能是什么？为什么这个信息窗口出现在错误的位置？而不是在标记上方？

编辑:

排查了半天，感觉问题出在
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})

当listener回调时，marker里面的值是i，不是实际数字，所以marker显示在一个 Angular 上。我感觉问题是不能给addListener传变量，只能输入实际数字.如何解决这个问题？

Answer 1

在 for 循环内声明的每个函数实例共享包含值 i 的相同闭包，因此您所有的 addListener 调用本质上都是调用 iw.open(map, undefined) 因为 i 将在迭代结束时离开数组的末尾。

参见 JavaScript closure inside loops – simple practical example有关此问题的示例解决方案，以及 How do JavaScript closures work有关 JavaScript 中闭包的更多信息。