如何从gInfowindow链接打开一个花哨的盒子

How to open a fancybox from an gInfowindow link

本文关键字：一个 盒子 gInfowindow 链接      更新时间：2023-09-26

我正在使用谷歌地图API V2，我需要打开一个花哨的盒子，从一个信息窗口内。我试过这个(但没有工作):

    GEvent.addListener(marker1, "click", function() {
        var cnt = '<div> <a id="fancybox" href="http://www.google.com/">Link</a></div>';  
    marker1.openInfoWindowHtml(cnt);  
    });

我不明白为什么它不工作，因为当我做同样的，但不作为一个参数(只是在一个链接在页面的某个地方)，它的工作:

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

添加花哨的盒子插件，我使用以下命令:

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

所以正如你所看到的，问题是，当调用花式框，从 openinfowindowtml ()，它不工作。

我很感激你的帮助。

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

正如你所看到的，从底部图像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>

我怎么能简单地调用fanybox从谷歌地图v3标记?

Thanks to lot

我认为你的问题是，html包括你的链接显示在infowindow不"存在"的时候，你设置的fancybox

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

我自己也遇到了类似的问题，很难让事件粘到Google Maps中的元素上，我尝试了Fancybox和Colorbox，但我在两者上都得到了相同的结果。对此，我的解决方案是直接在元素上使用一个老式的onclick，比如:

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

希望这能解决你的问题

相关文章：