使用InfoBubble.js中的fanybox与谷歌地图API

Question

我似乎无法在InfoBubble(即我的信息窗口)中加载fanybox。我在InfoBubble中有一个按钮，当点击时，应该使用fanybox显示图像。我在这里遇到过以前的问题，也遇到过其他一些问题，但这些解决方法都不适合我。

我设置它的方法如下。In index.html:

<script src="jquery-1.11.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="map.js"></script>
<script src="jquery.fancybox.pack.js"></script>
<script src="infobubble.js"></script>
<script>
$(document).ready(function() {
    $(".dialog").fancybox({ width: '50%', height: '50%', closeClick: true });
});    
</script>

In map.js:

infoBubble = new InfoBubble({
        maxWidth: 200,
        content: '<a class="dialog" href="preview.jpg" target="_blank">
                  <img src="button-icon.png"/></a>',
        position: new google.maps.LatLng(-34.397, 150.644)
});
google.maps.event.addListener(marker, 'click', function() {
    infoBubble.open(map, marker);

通过引用CSS类.dialog，它不应该工作，因为脚本已经存在于index.html页?这行不通。相反，我只是重定向到新页面中的图像。

Answer 1

您需要等待InfoBubble的domready事件触发后才能运行:

$(".dialog").fancybox({ width: '50%', height: '50%', closeClick: true });

例子jsfiddle

google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
    google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
        $(".dialog").fancybox({
            width: '200px',
            height: '200px',
            closeClick: true
        });
    });
});

Answer 2

我刚刚遇到了同样的问题，我让它像这样工作。

您需要按照geocodezip的建议向domready事件添加一个事件侦听器，但需要进行一些修改。简单地用domready事件打开fancybox似乎不起作用。我不知道为什么。

通过大量的摆弄，我能够弄清楚向onclick事件添加代码似乎可以做到这一点。注意，onclick事件处理程序有两条语句。第一个打开了花式盒子。第二个函数向onclick事件处理程序返回false。否则，页面会在fancybox加载后立即重定向。

google.maps.event.addListener(marker, 'click', function () {
    infoBubble.open(map, marker);
    google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
        var thecode = "$.fancybox.open([{href : 'preview.jpg', type : 'iframe'}]); return false;";
        $(".dialog").attr('onclick', thecode);
    });
});