fancybox：放大/缩小 googlemaps

Posted 2023-05-09

【中文标题】fancybox：放大/缩小 googlemaps

【英文标题】：fancybox: Zoom in/out for googlemaps

【发布时间】：2013-02-19 02:24:26

【问题描述】：

我使用 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】：

当您将 Google 地图嵌入 iframe（将它们嵌入网站的推荐方法）时，您无法使用鼠标滚轮放大/缩小地图（尽管您可以缩放街景图像）.. . 那是正常的行为。

检查这个 JSFIDDLE 作为纯 html iframe 的示例。

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

这不是花哨的问题，而是 html iframe 的限制。

编辑：

谷歌地图的融合表可以使用鼠标滚轮放大/缩小......在这种情况下，这些地图应该使用fancybox iframe 模式打开，例如：

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

见JSFIDDLE

我的结论：这完全取决于内容格式。 Fancybox 没有对 iframe 内的内容设置任何限制：无论您在常规 html iframe 中可以做什么，您都可以在 fancybox（iframe 模式）中做任何事情。

【讨论】：

@Meloun ：有趣的是，融合表地图使用鼠标滚轮放大/缩小。我想这一切都取决于地图格式。请参阅我的编辑答案。