Google地图InfoWindow出现在角落

Question

这是我在html中的代码，用于生成标记和infowindow（在轨道上使用ruby）

 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只是一些'愚蠢'的方法，我用来将数据从rails控制器上的ruby传递给javascript。

对于所有标记，infowindow都出现在角落。 但是对于我的另一张地图（只有一个带有infowindow的标记），它可以正常工作。

可能是我的问题是什么？为什么这个infowindow出现在错误的位置？而不是仅仅在标记之上？

修改

经过半天的麻烦拍摄后，我觉得问题出在了   google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})

当监听器回调时，标记内的值是i，这不是实际的数字，所以标记显示在一个角落。我觉得问题是无法将变量传递给addListener，只能输入实际数字怎么解决这个问题？

Answer 1

问题在于您的MarkerWithLabel库。 Infowindow从标记中获取位置。请尝试使用此链接http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html。它包含您要实现的所有内容。它没有用，那么你也可以用setPosition()函数设置infowindow的位置，只需传递你用来创建标记的latlng即可。

Answer 2

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

有关此问题的示例解决方案，请参阅JavaScript closure inside loops – simple practical example;有关JavaScript中的闭包的详细信息，请参阅How do JavaScript closures work。

Answer 3

我不推荐使用新的gem只是为了将数据从ruby传递给js ...你可以通过多种方式实现这一点......你的代码似乎很好但我不能说gon如何处理你的js脚本。请看一下这个类似的问题，我用动态 map和markers实现了相同的动态 infowindows。代码工作得很好

see here