我使用此处描述的技术Click event in Google Map InfoWindow not caught动态地将点击事件处理程序添加到添加到Google Map InfoWindow的某些内容中。除IE之外,效果很好。
我有正常锚标记的内容,这些链接工作正常。
我有一个带有jQuery(live)点击处理程序的锚标记读取id以触发其他一些操作,它在IE中没有任何作用。 Chrome / FF等工作得很好。我尝试过使用div和span而不改变行为。
有什么想法吗?
修改:这是谷歌地图v2(我知道它已被弃用),但在IE 7或8中不起作用。在此项目中没有对IE6感到困扰。
编辑:以下是一些代替行为的示例代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#gmap{ height:450px;width:350px; }
</style>
<script type="text/javascript">
var gmap;
var sampleLatLon = new GLatLng(37.4419, -122.1419);
var sampleIcon = new GIcon(G_DEFAULT_ICON);
$(document).ready(function () {
// Google maps setup
$(window).unload(function () { GUnload(); });
var gmap = new GMap2(document.getElementById("gmap"));
gmap.setCenter(sampleLatLon, 13);
gmap.setUIToDefault();
// Marker and InfoWindow setup
var marker = new GMarker(sampleLatLon, { icon: sampleIcon });
var infoWindowMarkup = '<a id="infowindow-1" class="clickeventvialive">click me</a>';
marker.bindInfoWindowHtml(infoWindowMarkup);
gmap.addOverlay(marker);
$('.clickeventvialive').live('click', function () {
alert('Are you Internet Exploder??');
});
});
</script>
</head>
<body>
<div id="gmap"></div>
</body>
</html>
答案 0 :(得分:1)
有两种方法可以使用旧的skool javascript onclick来解决另一种使用jquery的方法。
在jQuery方法中,在显示信息窗口之后绑定事件,并且创建的元素似乎解决了问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#gmap {
height: 450px;
width: 350px;
}
</style>
<script type="text/javascript">
var gmap;
var sampleLatLon = new GLatLng(37.4419, -122.1419);
var sampleIcon = new GIcon(G_DEFAULT_ICON);
$(document).ready(function(){
// Google maps setup
$(window).unload(function(){
GUnload();
});
var gmap = new GMap2(document.getElementById("gmap"));
gmap.setCenter(sampleLatLon, 13);
gmap.setUIToDefault();
// Marker and InfoWindow setup
var marker = new GMarker(sampleLatLon, {
icon: sampleIcon
});
//marker.bindInfoWindowHtml(infoWindowMarkup);
GEvent.addListener(marker, "click", function(){
var infoWindowMarkup = '<div class="container"><a id="infowindow-1" class="clickeventvialive">click me</a></div>';
gmap.openInfoWindowHtml(sampleLatLon, infoWindowMarkup, {
"onOpenFn": function(){
$(".clickeventvialive").bind("click", function (){alert("hello")});
}
});
});
gmap.addOverlay(marker);
});
</script>
</head>
<body>
<div id="gmap">
</div>
</body>
</html>
或旧的skool方法,您只需将onclick处理程序添加到链接HTML:
var infoWindowMarkup = '<a id="infowindow-1" onclick=alert("Old Skool") class="clickeventvialive">click me</a>';