点击Google Map API V3触发infoWindow或InfoBox事件 [英] Trigger event with infoWindow or InfoBox on click Google Map API V3
本文介绍了点击Google Map API V3触发infoWindow或InfoBox事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使用Google Maps API v3点击infoWindow时触发事件。在这个例子中，当我点击一个标记时，一个信息窗口显示一个唯一的消息，基于我点击的标记。我想也能够点击信息窗口，并有一个提示显示，说：
你点击infowindow（< ）
我发现了一些使用Google地图的示例API v2和jQuery，但不仅仅适用于普通的旧版Google Maps API v3。
$ b
< ;! doctype html>
< html lang =en>
< head>
< title> jQuery mobile with Google maps - Google maps jQuery plugin< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css/>
<脚本type =text / javascriptsrc =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 / javascriptsrc =http://maps.goog le.com/maps/api/js?v=3&sensor=false&language=en\"> < /脚本>
< 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;
函数initialize（）
{
map = new google.maps.Map（document.getElementById（'map_canvas'），{
zoom：7，
center： demoCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
addMarkers（）;
}
函数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>'
+此位置是：< br>
+ marker.title
+'< / p>'
+'< / div>'
+'< / div>';
return function（）{
infowindow.setContent（contentString）;
infowindow.open（map，marker）;
google.maps.event.addListener（infowindow，'click'，（function（i）{
alert（ 您点击了infowindow中的+ cityList [i] [0]）;
}））;
}
}）（marker，i））;
}
}
< / script>
< / head>
< body onload =initialize（）>
< div id =basic-mapdata-role =page>
< div data-role =header>
< h1>< a data-ajax =falsehref =/> jQuery mobile with Google maps v3< / a>实施例< / H1>
< a data-rel =back>返回< / a>
< / div>
< div data-role =content>
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;>
< div id =map_canvasstyle =height：350px;>< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
更新我最终为InfoBox弄清楚了这一点，包括在我的答案中。
解决方案
好吧，我想出了 infoWindow ，但后来我也想出了 InfoBox ，因为它更漂亮，更具可定制性。我是JavaScript新手，这些关闭可能非常棘手。
$ b
对于 infoWindow
< pre class =lang-html prettyprint-override>
<！doctype html>
< html lang =en>
< head>
< title>使用Google地图的jQuery手机 - 谷歌地图jQuery插件< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.6.4.min.js>< / script>
< script type =text / javascriptsrc =http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js>< /脚本>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en> < /脚本>
< 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;
函数initialize（）
{
map = new google.maps.Map（document.getElementById（'map_canvas'），{
zoom：7，
center： demoCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
addMarkers（）;
}
var boxText1 = document.createElement（div）;
boxText1.id =boxText1;
boxText1.className =labelText1;
boxText1.innerHTML =title1; //这是之前创建的
var boxList = [];
函数addMarkers（）
{
var marker，i;
var infowindow = new google.maps.InfoWindow（{
disableAutoPan：true
，isHidden：false
，pixelOffset：new google.maps.Size（-10，-10）
，closeBoxURL：
，窗格：mapPane
，enableEventPropagation：true
}）;
for（var i = 0; i< cityList.length; i ++）
{
marker = new google.maps.Marker（{
position：new google.maps。 LatLng（cityList [i] [1]，cityList [i] [2]），
map：map，
id：i，
title：cityList [i] [0]
}）;
var boxText = document.createElement（div）;
boxText.id = i;
boxText.className =labelText+ i;
boxText.innerHTML = cityList [i] [0];
boxList.push（boxText）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
var contentString ='< div id =infoWindow>'
+'< div id =bodyContent>'
+'< p>'
+此位置是：< br>
+ marker.title
+'< / p>'
+'< / div>'
+'< / div>';
return function（）{
infowindow.setContent（boxList [this.id]）;
infowindow.open（map，marker）;
}
}）（marker，i））; //结束添加标记侦听器
google.maps.event.addDomListener（boxList [i]，'click'，（function（marker，i）{
return function（）{
alert（'clicked'+ cityList [i] [0]）
}
}）（marker，i））;
} // endfor
} //结束函数
< / script>
< / head>
< body onload =initialize（）>
< div id =basic-mapdata-role =page>
< div data-role =header>
< h1>< a data-ajax =falsehref =/> jQuery mobile with Google maps v3< / a>实施例< / H1>
< a data-rel =back>返回< / a>
< / div>
< div data-role =content>
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;>
< div id =map_canvasstyle =height：350px;>< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
对于 InfoBox
<！doctype html>
< html lang =en>
< head>
< title>使用Google地图的jQuery手机 - 谷歌地图jQuery插件< / title>
< link rel =stylesheethref =http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.6.4.min.js>< / script>
< script type =text / javascriptsrc =http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js>< /脚本>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en> < /脚本>
< script type =text / javascript
src =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js > < /脚本>
< script type =text / javascript
src =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js > < /脚本>
< 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 boxList = [];
函数initialize（）{
map = new google.maps.Map（document.getElementById（'map_canvas'），{
zoom：7，
center： demoCenter，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
addMarkers（）;
}
函数addMarkers（）{
for（var i = 0; i
marker = new google.maps.Marker（{
position：new google.maps.LatLng（cityList [i] [1]，cityList [i] [2]），
map：map，
id ：i，
title：cityList [i] [0]
}）;
var boxText = document.createElement（div）;
boxText.id = i;
boxText.style.cssText =border：1px solid black; margin-top：8px; background：yellow; padding：5px;;
boxText.innerHTML =InfoBox for+ cityList [i] [0];
$ b $ myOptions = {
content：boxText
，disableAutoPan：false
，maxWidth：0
，pixelOffset：new google.maps.Size（ -
，zIndex：null
，boxStyle：{
background：url（'tipbox.gif'）no-repeat
，opacity：0.75
，width：280px
}
，closeBoxMargin：10px 2px 2px 2px
，closeBoxURL：http://www.google.com/intl/zh-CN/mapfiles/close .gif
，infoBoxClearance：new google.maps.Size（1，1）
，isHidden：false
，窗格：floatPane
，enableEventPropagation：false
};
var ib = new InfoBox（myOptions）;
boxList.push（ib）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
boxList [i] .open（地图，这）;
}
}）（marker，i））;
google.maps.event.addDomListener（boxList [i] .content _，'click'，（function（marker，i）{
return function（）{
alert（ 'clicked'+ cityList [i] [0]）
}
}）（marker，i））;
} // endfor
} //结束函数
< / script>
< / head>
< body onload =initialize（）>
< div id =basic-mapdata-role =page>
< div data-role =header>
< h1>< a data-ajax =falsehref =/> jQuery mobile with Google maps v3< / a>实施例< / H1>
< a data-rel =back>返回< / a>
< / div>
< div data-role =content>
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;>
< div id =map_canvasstyle =height：350px;>< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
I want to know how to trigger an event when I click on an infoWindow using Google Maps API v3. In this example, when I click on a marker, an info window shows up with a unique message, based on which marker I clicked. I want to also be able to click the info window and have an alert show up that says
"You clicked on the infowindow for (__fill in blank location_)
I found some examples using Google Maps API v2 and jQuery, but not with just plain old 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 I ended up figuring this out for InfoBox as well, which is included below in my answer.
解决方案
Ok I figured this out for infoWindow, but then I also figured it out for InfoBox since it is prettier and more customizable. I'm new to JavaScript and these closures can be very tricky.
For infoWindow
<!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();
}
var boxText1 = document.createElement("div");
boxText1.id = "boxText1";
boxText1.className = "labelText1";
boxText1.innerHTML = "title1";//this is created earlier
var boxList = [];
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true
,isHidden:false
,pixelOffset: new google.maps.Size(-10, -10)
,closeBoxURL: ""
,pane: "mapPane"
,enableEventPropagation: true
});
for (var i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
id: i,
title: cityList[i][0]
});
var boxText = document.createElement("div");
boxText.id = i;
boxText.className = "labelText" + i;
boxText.innerHTML = cityList[i][0];
boxList.push(boxText);
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(boxList[this.id]);
infowindow.open(map, marker);
}
})(marker, i)); //end add marker listener
google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) {
return function() {
alert('clicked ' + cityList[i][0])
}
})(marker, i));
} //endfor
}//end function
</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>
For InfoBox
<!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"
src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"> </script>
<script type="text/javascript"
src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"> </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 boxList =[];
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers(){
for (var i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
id: i,
title: cityList[i][0]
});
var boxText = document.createElement("div");
boxText.id = i;
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "InfoBox for " + cityList[i][0];
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
boxList.push(ib);
google.maps.event.addListener(marker,'click',(function(marker, i) {
return function() {
boxList[i].open(map, this);
}
})(marker, i));
google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) {
return function() {
alert('clicked ' + cityList[i][0])
}
})(marker, i));
} //endfor
} //end function
</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>
这篇关于点击Google Map API V3触发infoWindow或InfoBox事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
