Fancybox 无法从谷歌地图 v3 市场信息窗口打开答案

【问题标题】：Fancybox won't open from google maps v3 market infowindowFancybox 无法从谷歌地图 v3 市场信息窗口打开
【发布时间】：2025-12-20 19:25:11
【问题描述】：

地图现在在链接上：http://joostudio.info/test/

如您所见，从底部图像中，fancybox 工作得很好，但是当我从地图信息窗口调用它时，它就不起作用了。

这里是完整的页面源代码

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
    $("a#fb").fancybox();
});
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript">
var map;

function runmap() {

        var myLatlng = new google.maps.LatLng(43.154541,19.12315);

        var myOptions = {
        zoom: 10,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        var infowindow = new google.maps.InfoWindow({});

        var marker1 = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(43.145086,19.090633),
        });

        google.maps.event.addListener(marker1, "click", function () {
            infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>');
            infowindow.open(map, marker1);
        });

}
</script>

</head>

<body onload="runmap()">
<div id="map_canvas" style="width: 972px; height: 500px"></div>
</br>
<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
</body>
</html>

我怎样才能简单地从谷歌地图 v3 标记调用 fancybox？

非常感谢

【问题讨论】：

标签： javascript html google-maps-api-3

【解决方案1】：

问题是您在信息窗口中为您的 FancyBox 链接提供了 class 而不是 id

infowindow.setContent('<a class="fb" href="fancybox/example/1_b.jpg">
<img src="fancybox/example/1_s.jpg" alt=""/></a>')

但是你通过id调用它

<script type="text/javascript">    
$(document).ready(function() {    
    $("a#fb").fancybox();    
});    
</script>

底部图像有效的原因是您在那里使用id

<a id="fb" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>

【讨论】：

【解决方案2】：

在下面寻找链接：

谷歌地图+fancybox http://www.daimlerstr.de/berge/tests/fancyboxtest.html

【讨论】：