在InfoBubble.js中使用fancyBox和Google Maps API

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

我设置它的方式如下。 在index.html ：

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

在map.js ：

 infoBubble = new InfoBubble({ maxWidth: 200, content: ' ', 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事件处理程序有两个参数。 第一个打开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); }); });