0

我正在尝试Shadowbox.js在多个内部使用InfoWindow：

function initialize() {
    //create the Map
    var map = new google.maps.Map(...);

    //create the Markers
    var marker = new google.maps.Marker(...);
    var marker2 = new google.maps.Marker(...);

    //create the InfoWindow
    var infoWindow = new google.maps.InfoWindow();

    //link the Markers to the InfoWindow
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<a href="http://placehold.it/200x200.jpg" rel="shadowbox">Working shadowbox link</a>');
        infoWindow.open(map, marker);
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infoWindow.setContent('<a href="http://placehold.it/300x150.jpg" rel="shadowbox">Broken shadowbox link</a>');
        infoWindow.open(map, marker2);
    });

    //enable Shadowbox
    google.maps.event.addListener(infoWindow, 'domready', function() { 
        Shadowbox.init({
            overlayOpacity: 0.8
        });
    }); 
}
google.maps.event.addDomListener(window, 'load', initialize);

如您所见，我已成功使其工作，但仅适用于第一个InfoWindow.
这似乎是由我的事件附件引起的，我正在使用domready：

google.maps.event.addListener(infoWindow, 'domready', function() {});

我找不到另一种方法来为每个InfoWindow.

有什么建议吗？

4

1 回答 1

0

像往常一样，我在写完我的问题几分钟后就找到了我正在寻找的解决方案......
要开始Shadowbox处理每一个问题InfoWindow：您需要手动调用 Shadowbox player。

使用自定义类而不是rel=shadowbox：

<a href="http://placehold.it/200x200.jpg" class="dyn-shadowbox">
    Shadowbox link
</a>

每次domready触发时InfoWindow，手动将事件侦听器附加到每个.dyn-shadowbox链接：

google.maps.event.addListener(infoWindow, 'domready', function() { 
    var dynlinks = document.getElementsByClassName('dyn-shadowbox');
    var n = dynlinks.length;
    for (var i = 0; i < n; i++) {
       var link = dynlinks[i];
       link.removeEventListener('click');
       link.addEventListener('click', function(ev) {
           ev.preventDefault();
           Shadowbox.open({
               link:    link,
               content: link.getAttribute('href'),
               player:  'img',
               title:   ''
           });
       });
    }
});

更新了 JSFiddle

于 2013-11-08T10:46:27.910 回答