Javascript 具有延迟内容的多个Google地图信息窗口

我在处理多个Google Maps（JS API v3）信息窗口的内容时遇到了一些问题，这些信息窗口一个接一个地连接到多个标记

问题似乎与这样一个事实有关，即我将信息窗口的打开延迟到我从服务器检索完它的内容之后，最终将填充它

结果是，在关闭一个InfoWindow并重新打开它时，它被重新绘制的次数与我单击它的标记的次数相同

显示代码前的示例：

一旦GMAP正确初始化并设置好标记，我点击其中一个，它的相关信息窗口就会出现

然后我关上它

我单击同一个标记，出现两个重叠的信息窗口（或者可能是一个，但打开了两次）

然后我关闭它（据说有两个信息窗口关闭）

以此类推。

以下是代码：

 var pins = {
     list: [], // where the markers objects are stored.
     window: new google.maps.InfoWindow({
                 content: "Loading..." // promised content
             }),
     draw: function(coords, content_id, timeout) {
               setTimeout(function() {
                   pins.list.push(new google.maps.Marker({
                       position: coords,
                       map: map, // initialized elsewhere
                       title: content_id
                   });
               });
           },
     drop: function(array_of_pins) { // array of objects, each one containing
                                     // "coords" and "content_id" respectively
                                     // of the marker and the InfoWindow.
                var timeout = 100;

                for (i in pins.list) // Loop added to solve the problem
                    google.maps.event.clearListeners(pins.list[i], "click");

                for (i in array_of_pins)
                     pins.draw( array_of_pins[i].coords,
                                array_of_pins[i].content_id, 
                                i * timeout );

                setTimeout(function() {
                    for (i in pins.list) 
                         google.maps.event.addListener(
                             pins.list[i],
                             "click",
                             function() { 
                                 pins.content(this, this.title);
                             }
                         );
                }, array_of_pins.length * timeout);
           },
     content: function(marker, content_id) {
               deferredContentFunction(content_id)
                       .done(function(data) {
                           var content = '<p>'+data.content+'</p>';
                           pins.window.setContent(content);
                           pins.window.open(map, marker);
                       })
                       .fail(function() {
                           // error handling
                       });
           }
 };

var引脚={
列表：[]，//存储标记对象的位置。
窗口：新建google.maps.InfoWindow({
内容：“正在加载…”//承诺的内容
}),
绘制：函数（坐标、内容id、超时）{
setTimeout（函数（）{
pins.list.push（新的google.maps.Marker({
职位：coords，
map:map，//在别处初始化
标题：content\u id
});
});
},
drop:function（一组针的数组）{//对象数组，每个对象包含
//分别为“coords”和“content_id”
//标记和信息窗口。
var超时=100；
for（pins.list中的i）//添加循环以解决问题
google.maps.event.clearListeners（pins.list[i]，“单击”）；
用于（i在针的阵列中）
pins.draw（pins的数组[i].coords，
_管脚的数组[i]。内容\u id，
i*超时）；
setTimeout（函数（）{
用于（引脚列表中的i）
google.maps.event.addListener(
引脚列表[i]，
“点击”，
函数（）{
内容（这个，这个标题）；
}
);
}，数组_的_引脚。长度*超时）；
},
内容：功能（标记、内容\u id）{
deferredContentFunction（内容\u id）
.完成（功能（数据）{
var content=''+data.content+'
'；
pins.window.setContent（content）；
引脚。窗口。打开（地图，标记）；
})
.fail（函数（）{
//错误处理
});
}
};

---

我怀疑（通过

this

）对

pins.drop（）

函数中相关标记的引用在某个点丢失，这反过来又会导致问题。

您多次将单击侦听器添加到标记中（每次调用

drop

在pins数组上时一次）

一个选项是在再次添加侦听器之前清除它们：

for (i in pins.list) 
  google.maps.event.clearListeners(pins.list[i], "click");
  google.maps.event.addListener(
    pins.list[i],
    "click",
    function() { 
      pins.content(this, this.title);
    }
  );    

---

请提供一个演示该问题的示例。非常感谢，这是我应该追求的。愚蠢的meh。一个简单的

google.maps.event.clearListeners（pins.list[I]，“click”）

，用于

I

在

pins.list

数组上循环，就在

pins.drop（）中添加侦听器的循环之前

功能。