Question

我在处理多个Google地图（JS API v3）InfoWindows的内容时遇到了一些问题。

这个问题似乎与我推迟InfoWindow开放的事实有关，直到我完成了从服务器中检索内容的那一刻，最终将填充它。

结果是，在关闭一个InfoWindow并重新打开它之后，它会重新绘制多次，因为我点击了它的标记。

显示代码前的示例：

一旦GMaps被正确初始化并且设置了标记，我点击其中一个并显示其相关的InfoWindow。

然后我关闭它。

我点击相同的标记，出现两个重叠的InfoWindows（或者它可能是一个，但是打开了两次）。

然后我关闭它（据说两个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
                       });
           }
 };

我怀疑this函数中相关标记的引用（通过pins.drop()）会在某个时刻丢失，从而导致问题。

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

多个带有延迟内容的Google地图InfoWindows

1 个答案: