JavaScript点击事件的任何谷歌地图标记？ [英] JavaScript click event for any google maps markers?
问题描述
当任何Google地图标记点击时，我需要做些事情。我使用此链接中的演示作为出发点：
http://gmap3.net/examples/tags.html
UPDATE - 我尝试了以下操作：
$。each（markers，function（i，marker）{
marker.click（function（）{
alert（'alert'） ;
}）;
}）;
$ b $ .each（markers，function（i，marker）{
$（marker）.click（function（）{
alert（'alert'）;
}）;
}）;
更新我已经尝试在现有代码中添加这个中间部分：
$ .each（markers，function（i，marker）{
marker.setMap（checked？map：null）;
//添加的代码开始
$（marker）.click（function（）{
alert（'dfd'）;
}）;
//添加的代码结束
}）;
请注意，OP询问如何使用GMAP3库，它是一个jQuery插件库，在Google地图图层顶部添加一个API图层。说Google API使用google.maps.addListener是绝对正确的，但我认为OP需要更接近使用addMarkers的GMAP3示例，但收听点击事件。考虑到这一点，我修改了GMAP3的例子，并将鼠标事件改为click事件，并摆脱了mouseleave事件。
对于那些想要进一步玩的人，我创建了此示例的jsFddle 。
<这里是源代码：
<！DOCTYPE HTML>< html>< head>
I need to make something happen when any google maps marker is clicked on. Im using the demo from this link as a starting point:
http://gmap3.net/examples/tags.html
UPDATE - ive tried the following:
$.each(markers, function(i, marker){
marker.click(function(){
alert('alert');
});
});
$.each(markers, function(i, marker){
$(marker).click(function(){
alert('alert');
});
});
UPDATE Ive tried adding this middle section to existing code:
$.each(markers, function(i, marker){
marker.setMap( checked ? map : null);
//added code begins
$(marker).click(function(){
alert('dfd');
});
//added code ends
});
Note that the OP is asking about doing this using the GMAP3 library, which is a jQuery plugin library that adds an API layer on top of the Google Maps layer. it is absolutely correct to say that the Google API is to use google.maps.addListener, but I think that the OP wants something that's closer to the GMAP3 example using addMarkers, but listening to the click event. With that in mind, I modified the example from GMAP3 and changed the mouseenter event to the click event and got rid of the mouseleave event.
For those wanting to do further playing, I created a jsFddle of this example.
Here's the source:
<!DOCTYPE HTML>
<html>
<head>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-4.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#map').gmap3({
action: 'init',
options: {
center: [46.578498, 2.457275],
zoom: 5
}
}, {
action: 'addMarkers',
markers: [
{
lat: 48.8620722,
lng: 2.352047,
data: 'Paris !'},
{
lat: 46.59433,
lng: 0.342236,
data: 'Poitiers : great city !'},
{
lat: 42.704931,
lng: 2.894697,
data: 'Perpignan ! <br> GO USAP !'}
],
marker: {
options: {
draggable: false
},
events: {
click: function(marker, event, data) {
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({
action: 'get',
name: 'infowindow'
});
if (infowindow) {
infowindow.open(map, marker);
infowindow.setContent(data);
} else {
$(this).gmap3({
action: 'addinfowindow',
anchor: marker,
options: {
content: data
}
});
}
}
}
}
});
});
</script>
</head>
<body>
<div id="map" style="width: 400x; height: 400px"></div>
</body>
</html>
这篇关于JavaScript点击事件的任何谷歌地图标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
