Javascript 将InfoBubble.js中的fancyBox与Google Maps API一起使用

我似乎无法在（即我的信息窗口）中加载。我在InfoBubble中有一个按钮，单击该按钮时，应该会使用fancyBox显示一个图像。我遇到过以前的问题和其他一些问题，但这些解决方案都不适合我

我的设置方法如下。在

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>

---

通过引用CSS类

.dialog

，它不应该工作吗，因为脚本已经在

index.html

页面中了？它不起作用。相反，我只是被重定向到新页面中的图像。

您需要等待InfoBubble的domready事件触发，然后再运行此操作：

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

---

我只是有同样的问题，我让它这样工作

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

通过大量的修改，我发现将代码添加到onclick事件似乎可以做到这一点。注意，onclick事件处理程序有两个状态。第一个打开fancybox。第二个函数向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);

    });
});

---

在打开infowindow之前，不会呈现infoBubble中的内容（在DOM中找不到）。您尚未提供该代码。@geocodezip抱歉，我刚刚添加了该代码（请参见编辑）。它与标记的事件侦听器相关联。我看到了InfoBubble中的内容。看起来不错。只是fancyBox不起作用。您需要等待InfoBubble的domready事件触发，然后才能运行此

$（“.dialog”）。fancyBox（{width:'50%'，height:'50%'，closeClick:true}）

@geocodezip我应该把这行代码放在哪里才能实现？我如何知道InfoBubble的domready事件在哪里？为太多的问题道歉，我仍然是JS的初学者，所以有点不清楚。谢谢你，但我使用的是Firefox，它在你的JSFIDLE中似乎也不起作用。图像将在新窗口中打开，而不是在fancyBox中打开。这就是您的代码所做的<代码>内容：'，如果您不想让它这样做，请更改它（尤其是target=“\u blank”）。这行代码应该在fancyBox中打开图像，不是吗？就像这把叉形小提琴：（见地图下方的按钮）。这不是在infoBubble内部发生的。抱歉，请参阅。我忘记删除

target=“\u blank”

。不管怎样，仍然有一个问题。谢谢你迄今为止的帮助。

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

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

    });
});