javascript 任何谷歌地图标记的JavaScript点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9481476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript click event for any google maps markers?
提问by Evanss
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
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
});
采纳答案by Tony Miller
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.
请注意，OP 要求使用 GMAP3 库执行此操作，这是一个 jQuery 插件库，可在 Google 地图层之上添加 API 层。说 Google API 使用 google.maps.addListener 是绝对正确的，但我认为 OP 想要使用 addMarkers更接近GMAP3 示例的东西，但要监听点击事件。考虑到这一点，我修改了 GMAP3 中的示例并将 mouseenter 事件更改为 click 事件并摆脱了 mouseleave 事件。
For those wanting to do further playing, I created a jsFddle of this example.
对于那些想要进一步玩的人，我创建了这个示例的jsFddle。
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>回答by Diode
google.maps.event.addListener(marker, 'click', function() {
});
ref: https://code.google.com/apis/maps/documentation/javascript/events.html#UIEvents
参考：https: //code.google.com/apis/maps/documentation/javascript/events.html#UIEvents
Example : http://jsfiddle.net/diode/yXQwp/
回答by mindandmedia
your question really doesn't entail much detail, but maybe you need something like this:
你的问题真的不需要太多细节，但也许你需要这样的东西：
$.each(markers, function(i, marker){
marker.click(function(){ //maybe, its $(marker).click
console.log(marker);
});
});
edit: this couls work for you...
编辑：这可能对你有用......
google.maps.event.addListener(marker, 'click', toggleBounce);
if you google that exact line, you get further pointers... good luck!
如果你用谷歌搜索那个确切的行，你会得到进一步的指示......祝你好运！
