具有延迟内容的多个 Google Maps InfoWindows

Question

我在处理多个 Google 地图 (JS API v3) InfoWindows 的内容时遇到了一些麻烦，这些内容被逐个附加到多个标记。

问题似乎与以下事实有关：我将 InfoWindow 的打开延迟到我完成从服务器检索其内容的那一刻，最终将填充它。

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

展示代码前的示例：

一旦 GMaps 正确初始化并设置了标记，我单击其中一个并出现其相关的 InfoWindow。

然后我关闭它。

我单击同一个标记并出现两个重叠的 InfoWindow（或者可能是一个，但打开了两次）。

然后我关闭它（并且应该关闭两个 InfoWindows）。

等等等等。

这是代码：

 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
                       });
           }
 };

我怀疑对pins.drop() 函数中相关标记的引用（通过this）在某些时候丢失了，这反过来又导致了问题。

Answer 1

您正在多次将点击侦听器添加到标记（每次在引脚数组上调用 drop 一次）。

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

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);
    }
  );