任何谷歌地图标记的JavaScript点击事件？答案

【问题标题】：JavaScript click event for any google maps markers?任何谷歌地图标记的JavaScript点击事件？
【发布时间】：2012-03-17 21:32:15
【问题描述】：

当点击任何谷歌地图标记时，我需要做一些事情。我使用此链接中的演示作为起点：

http://gmap3.net/examples/tags.html

更新 - 我尝试了以下方法：

$.each(markers, function(i, marker){
  marker.click(function(){  
     alert('alert');
  });
});

$.each(markers, function(i, marker){
  $(marker).click(function(){  
     alert('alert');
  });
});

更新我已经尝试将这个中间部分添加到现有代码中：

        $.each(markers, function(i, marker){
            marker.setMap( checked ? map : null);

           //added code begins
            $(marker).click(function(){ 
                 alert('dfd');
              });
           //added code ends

        });

【问题讨论】：

标签： javascript jquery google-maps-api-3 jquery-gmap3

【解决方案1】：

google.maps.event.addListener(marker, 'click', function() {

});

参考：https://code.google.com/apis/maps/documentation/javascript/events.html#UIEvents

例如：http://jsfiddle.net/diode/yXQwp/

【讨论】：

新手问题，但我看不到在我的问题中链接到的演示中添加它的位置。

【解决方案2】：

请注意，OP 询问是否使用 GMAP3 库执行此操作，这是一个 jQuery 插件库，在 Google Maps 层之上添加了一个 API 层。说 Google API 是使用 google.maps.addListener 是绝对正确的，但我认为 OP 想要更接近GMAP3 example using addMarkers 的东西，但要听点击事件。考虑到这一点，我修改了 GMAP3 中的示例，将 mouseenter 事件更改为 click 事件，并去掉了 mouseleave 事件。

对于那些想进一步玩的人，我创建了一个jsFddle of this example。

来源：

<!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>

【讨论】：

你是对的，Fiddle 不再起作用。我得看看有什么变化，也许需要更新到更新的 GMAP3。

【解决方案3】：

你的问题确实不需要太多细节，但也许你需要这样的东西：

$.each(markers, function(i, marker){
  marker.click(function(){  //maybe, its $(marker).click
     console.log(marker);
  });
});

编辑：这可以为你工作......

google.maps.event.addListener(marker, 'click', toggleBounce);

如果你用谷歌搜索那条确切的行，你会得到更多的指示......祝你好运！

【讨论】：

都不适合我，我用我的尝试更新了我的问题。请让我知道是否有更多细节会有所帮助。谢谢
再次更新。我没有意识到您的代码应该合并到现有的，而不是最后添加。
google.maps.event.addListener(marker, 'click', toggleBounce);实际上是向 google maps api v3 对象添加侦听器的方式