Question

我正在尝试在点击链接时将静态Google地图加载到fancybox / lightbox中。我的代码是

<a href="http://maps.googleapis.com/maps/api/staticmap?
 zoom=13&size=400x400&markers=color:blue|32,50&sensor=true"><img src="icon.png" /></a>

但它不会显示，iframe保持空白。我猜是因为地图应该作为IMG元素的src加载，对吗？

知道如何解决这个问题吗？

另一种方法是在viframe中打开一个普通的谷歌地图，但它总是会显示两个标记，一个在该位置，一个是谷歌的“最佳猜测” - 有没有办法删除“最佳猜测”标记？有关示例，请参阅http://blog.felixsalomon.net，点击第一篇文章标题旁边的小地图图标。

谢谢！

Answer 1

静态地图（使用Google Static Map API）可以呈现为常规图片。

由于你的链接：

<a class="fancybox" href="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x400&markers=color:blue|32,50&sensor=true"><img src="icon.png" /></a>

...没有告诉fancybox这是image（因为它没有图片扩展名），你必须强制fancybox需要处理的type内容：

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

注意我已将class="fancybox"添加到锚点，因此可以将fancybox绑定到该选择器。

参见 JSFIDDLE （使用fancybox v1.3.4）

编辑：由于您使用的是fancybox WP插件，或者您可以将image扩展名添加到网址末尾的锚点，例如添加&filename=image.jpg ...所以您的完整网址将如下所示：

href="http://maps.googleapis.com/maps/api/staticmap?zoom=13&size=400x400&markers=color:blue|32,50&sensor=true&filename=image.jpg"

如果这样做，则无需编辑Easyfancybox脚本。检查 updated JSFIDDLE

在Fancybox中打开静态谷歌地图？

1 个答案: