Javascript 如何从gInfowindow链接打开fancybox_Javascript_Html_Google Maps_Xhtml_Fancybox

Javascript 如何从gInfowindow链接打开fancybox

javascript html google-maps

Javascript 如何从gInfowindow链接打开fancybox,javascript,html,google-maps,xhtml,fancybox,Javascript,Html,Google Maps,Xhtml,Fancybox,我正在使用谷歌地图API V2，我需要在一个信息窗口中打开一个fancybox。我试过这个（但没用）： GEvent.addListener（标记1，“单击”，函数（）{ var cnt=''； marker1.openInfoWindowHtml（cnt）； }); 我不明白为什么它不工作，因为当我做同样的事情，但不是作为一个参数（只是在页面的某个链接中），它工作： <a id="fancybox" href="fancybox/example/1_b.jpg"><

我正在使用谷歌地图API V2，我需要在一个信息窗口中打开一个fancybox。我试过这个（但没用）：

GEvent.addListener（标记1，“单击”，函数（）{
var cnt=''；
marker1.openInfoWindowHtml（cnt）；
});

我不明白为什么它不工作，因为当我做同样的事情，但不是作为一个参数（只是在页面的某个链接中），它工作：

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

要添加fancy box插件，我使用以下方法：

<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#fancybox").fancybox();
});
</script>


$（文档）.ready（函数（）{
$（“a#fancybox”）.fancybox（）；
});

如您所见，问题在于从openInfoWindowHtml（）中调用fancy box时，它不起作用

谢谢你的帮助

地图现在位于链接上：

正如你们所看到的，从底部图像来看，fancybox工作得很好，但当我从MapInfoWindow调用它时，它就不工作了

下面是完整的页面源代码

<!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>


测试
$（文档）.ready（函数（）{
$（“a#fb”）.fancybox（）；
});
var映射；
函数runmap（）{
var mylatng=new google.maps.LatLng（43.154541,19.12315）；
变量myOptions={
缩放：10，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var infowindow=new google.maps.infowindow（{}）；
var marker1=新的google.maps.Marker({
地图：地图，
位置：新google.maps.LatLng（43.145086,19.090633），
});
google.maps.event.addListener（标记1，“单击”，函数（）{
infowindow.setContent（“”）；
打开（地图，标记1）；
});
}

我如何从google maps v3 marker简单地调用fancybox

非常感谢

我认为您的问题在于，在设置fancybox时，infowindow中显示的html（包括您的链接）并不“存在”

我认为可以通过提供DOM节点而不是HTML字符串来解决这个问题。只要用你的链接创建一个隐藏的div，你想显示它，它应该可以工作。

我自己也遇到了一个类似的问题，很难让一个事件粘到谷歌地图中的一个元素上，我尝试了Fancybox和Colorbox，但我在这两个方面都得到了相同的结果。我的解决方案是直接在元素上使用和使用好的旧onclick，例如：

<a href="your url" onclick="$.fancybox.open({href:'your url'}); return false;">link</a>

希望这能解决你的问题

<a href="your url" onclick="$.fancybox.open({href:'your url'}); return false;">link</a>