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

我的设置方法如下。在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>


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页面中已经存在,所以它不起作用吗?没用相反,我只是重定向到新页面中的图像。

最佳答案

在运行以下命令之前,您需要等待InfoBubble的domready事件触发:

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


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

07-24 09:30