Google Maps事件侦听器在Javascript'for'循环中无法正常工作 [英] Google Maps event listeners not working properly in a Javascript 'for' loop

问题描述

我正在尝试设置一个Google地图实例，其中一些内容是为一组点动态生成的。

现在，我正在使用一个循环通过任意数量的纬度和经度值循环，并创建标记是地图上的那些点。

我正在尝试添加与这些对应的信息窗口标记，并在您点击标记时弹出。

但是，我有点麻烦。它看起来像我的for循环创建基本上所有的工作都没有失败，除了eventListener部分：

  function drawMap（points） {
 popUps = new Array（）; 
 infoWindows = new Array（）; 
位置=新数组（）; 
 
 contents ='< div id =content>'+ 
'< div id =siteNotice>'+ 
'< / div> '+ 
'< p id =firstHeadingclass =firstHeading> Position< / h1>'+ 
'< / div>'; 
 
 infowindow = new google.maps.InfoWindow（{
 content：contents 
}）; （i = 0; i< points.length; i ++）{
位置[i] =新的google.maps.Marker（{position：
 latlng [i ]，
地图：地图，
标题：位置}）; 
 
 popUps [i] ='< div id =content>'+ 
'< div id =siteNotice>'+ 
' / div>'+ 
'< p id =firstHeadingclass =firstHeading> Position< / h1>'+ 
'< / div>'; 
 
 infoWindows [i] = new google.maps.InfoWindow（{
 content：popUps [i] 
}）; 
 
 //所有到此为止的工作正常，我可以手动引用所有
 //并获取预期的值。 
 
 google.maps.event.addListener（position [i]，'click'，function（）{
 infoWindows [i] .open（map，positions [i]）; 
}）; 
 
 //如果我在这里将每个i的实例更改为0，我将在
 //包含我在此for循环中定义的内容的预期标记中弹出一个弹出窗口。 
 //1和2.相同但我不行。 
} 
} 
  

其中map是google.maps的一个实例我们在页面加载时调用这个功能，它为我的地图添加了位置和标记：

>

  drawMap（[[13.283,162.232]，[18.232,112.223]，[17.233，80.293]]）;有没有人知道为什么我不能动态地创建事件监听器？任何帮助将不胜感激！ 
 
 
 
提前感谢。 ：）
 
 
 
编辑：
 
 
 
事实证明，这里的要求只有当divs弹出时页面加载我甚至没有需要事件监听器... 
 
 
 
但是，两个答案都很好，帮助我弄清楚如何使原始代码工作，所以谢谢。 ：D 
解决方案
创建一个函数来添加地图监听器，在您的 infowindow 声明。该功能将创建一个关闭并冻结传递给它的 i 值。
  ... 
 infowindow = new google.maps.InfoWindow（{
 content：contents 
}）; 
 
 var addListener = function（i）{
 
 google.maps.event.addListener（positions [i]，'click'，function（）{
 infoWindows [i] .open（map，positions [i]）; 
}）; 
 ... 
 
} 
  
然后在你的循环
  addListener（i）; 
  
 
I'm trying to set up a Google map instance where some content is dynamically generated for a set of points.

Right now, I'm using a for loop to loop through any number of latitude and longitude values and create markers are those points on the map.

I'm trying to add info windows that correspond to each of these markers and have them pop up when you click the markers.

However, I'm having a little bit of trouble. It looks like my for loop that creates basically everything is working without fail, apart from the eventListener section:
function drawMap(points) {
    popUps = new Array();
    infoWindows = new Array();
    positions = new Array();

    contents = '<div id = "content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<p id="firstHeading" class="firstHeading">Position</h1>' +
        '</div>';

    infowindow = new google.maps.InfoWindow({
        content: contents
    });

    for( i = 0; i < points.length; i++ ){
        positions[i] = new google.maps.Marker({ position: 
        latlng[i], 
        map:map, 
        title:"Position"});

        popUps[i] = '<div id = "content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<p id="firstHeading" class="firstHeading">Position</h1>' +
            '</div>';

        infoWindows[i] = new google.maps.InfoWindow({
            content: popUps[i]
        });

    // everything up to this point works fine, I can reference it all manually
    // and get back the expected value.

        google.maps.event.addListener(positions[i], 'click', function(){
            infoWindows[i].open(map, positions[i]);                 
        });

    // if I change each instance of "i" to "0" here, I'll get a popup on the
    // expected marker containing content that I defined in this for loop. Same for
    //  "1" and "2." But "i" doesn't work.
    }
}
where "map" is an instance of google.maps.Map and each instance of popUps will differ in the final product.

I call this function when the page loads, which adds positions and markers to my map:
drawMap([[13.283 , 162.232], [18.232 , 112.223], [17.233, 80.293]]);
Does anyone know why I'm unable to create eventListeners dynamically? Any help would be greatly appreciated! 

Thanks in advance. :)

Edit: 

Turns out, the requirements here are only to have the divs pop up when the page loads. I didn't even need the event listener...

However, both answers were good and helped me figure out how to make the original code work, so thanks. :D
解决方案
Create a function to add the maps listener, after your infowindow declaration. The function will create a closure and freeze the i value passed into it.
...
infowindow = new google.maps.InfoWindow({
        content: contents
    });

var addListener = function (i) {

google.maps.event.addListener(positions[i], 'click', function(){
        infoWindows[i].open(map, positions[i]);                 
    });
   ...

}
Then call it in your for loop:
addListener(i);


                        
这篇关于Google Maps事件侦听器在Javascript'for'循环中无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！