我想知道当我使用Google Maps API v3点击infoWindow时如何触发事件 . 在此示例中,当我单击标记时,将根据我单击的标记显示一个信息窗口,其中包含唯一的消息 . 我也希望能够点击信息窗口并显示一条警告
“你点击了infowindow(_fill in blank location)
我找到了一些使用Google Maps API v2和jQuery的示例,但没有使用简单的旧版Google Maps API v3 .
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
google.maps.event.addListener(infowindow, 'click', (function(i){
alert("You clicked on the infowindow for" + cityList[i][0]);
}));
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
Update 我最终也为InfoBox解决了这个问题,我的答案包含在下面 .
4 回答
好的,我认为这是
infoWindow
,但后来我也想出了InfoBox
,因为它更漂亮,更可定制 . 我是JavaScript新手,这些闭包可能非常棘手 .For infoWindow
For InfoBox
InfoWindow对象没有“click”事件,因此您无法做到
相反,您可以将事件处理程序附加到DOM对象,例如
你打电话给它
感谢名单!艾琳是男人!你解决了我的问题!我现在正在抨击它4天了!如果你是新手,关闭是一件痛苦的事 .
这是我的工作代码(Sencha Touch 2和Google maps API v3) . 它将允许一个信息窗口开放 .
我的解决方案:尝试在xml中使用onClick