如何从 gInfowindow 链接打开 fancybox
我正在使用谷歌地图 API V2，我需要从信息窗口中打开一个 fancybox。 我尝试了这个（但没用）：
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>
正如您所看到的，问题是当从 openInfoWindowHtml() 内部调用花式框时，它不起作用。
我将不胜感激一些帮助。
地图现在位于链接上： http://joostudio.info/test/
如您所见，从底部image 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？
多谢
I am using google maps API V2 and i need to open a fancybox, from within an infowindow.
I tried this(but didnt work):
GEvent.addListener(marker1, "click", function() {
var cnt = '<div> <a id="fancybox" href="http://www.google.com/">Link</a></div>';
marker1.openInfoWindowHtml(cnt);
});
I dont understand why it does not work, because when i do the same but not as a parameter(just in a link somewhere in the page), it works:
<a id="fancybox" href="fancybox/example/1_b.jpg"><img src="fancybox/example/1_s.jpg" alt=""/></a>
To add the fancy box plugin i use this:
<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>
So as you see, the problem is that when calling the fancy box, from within openInfoWindowHtml(), it doesnt work.
Ill appreciate some help.
map is now on the link: http://joostudio.info/test/
As you can see, from bottom image fancybox works just fine but when I call it from map infowindow it jus doesn't work.
Here is complete page source code
<!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>
How can I simply call fancybox from google maps v3 marker?
Thanks a lot
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你的问题是，在你设置 fancybox 时，包含信息窗口中显示的链接的 html 并不“存在”。
我认为你可以通过提供 DOM 节点而不是 HTML 字符串来解决这个问题。只需使用您想要显示的链接创建一个隐藏的 div，它就应该可以工作。
I think your problem is that the html including your link displayed in infowindow does not "exist" at the time you setup the fancybox.
I think you can solve this problem by providing a DOM node instead of string with HTML. Simply create a hidden div with your link, you want to display and it should work.
我自己也遇到了类似的问题，很难让一个事件粘在 Google 地图内的某个元素上，我尝试了 Fancybox 和 Colorbox，但两者都得到了相同的结果。我的解决方案是直接在元素上使用旧的 onclick ，例如：
希望这可以解决您的问题。
Ran into to a similar problem myself, it's very hard to get an event to stick to an element inside a Google Maps, I tried both Fancybox and Colorbox but I got the same result on both. My solution to this was to use and good old onclick directly on the element, so something like:
Hope this solves your issue.