fancybox:放大/缩小googlemaps

时间:2013-03-04 21:00:06

标签: jquery google-maps iframe fancybox fancybox-2

我使用fancybox(http://fancyapps.com/fancybox/)在google-maps上显示一些地方,其中一个例子如下:

<script type="text/javascript"> 
    $(document).ready(function() {
    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
    });        
</script>

和html

Google maps
<ul>
        <li><a class="fancybox-media" href="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17">Search results</a></li>
        <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17">Direct link</a></li>
        <li><a class="fancybox-media" href="http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56">Street view</a></li>
</ul>

但我可以用鼠标滚轮放大/缩小, 甚至可能吗?

1 个答案:

答案 0 :(得分:1)

当您使用iframe嵌入Google地图时(建议将其嵌入网站的方式),您无法使用鼠标滚轮放大/缩小地图(您可以缩放街景图像) ......这将是正常行为。

使用纯html iframe检查此 JSFIDDLE 为例。

当您在fancybox中显示Google地图时,它们实际上包含在iframe中,因此您无法使用鼠标滚轮放大或缩小....所以关于您的问题,我不会认为这是可能的。

这不是一个fancybox问题,而是一个html iframe限制。

编辑

Google地图的融合表可以使用鼠标滚轮进行放大/缩小...在这种情况下,应使用fancybox iframe模式打开这些地图:

$(".fancybox").fancybox({
    type: "iframe"
});

参见 JSFIDDLE

我的结论:这一切都取决于内容格式。 Fancybox没有对iframe内的内容设置任何限制:无论你在普通的html iframe中做什么,你都可以在fancybox(iframe模式)内做。