logo标签列表

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

javascriptjquerygoogle-maps-api-3jquery-gmap3
3

当点击Google地图标记时，我需要触发某些操作。我使用这个链接中的演示作为起点：

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

        });
3个回答
3
新手问题，但我看不到在我提出问题的演示中添加这个的地方。 - Evanss
1
请注意，OP正在询问如何使用GMAP3库来完成此操作，该库是一个jQuery插件库，它在Google Maps层之上添加了一个API层。虽然使用google.maps.addListener使用Google API是绝对正确的，但我认为OP想要更接近使用addMarkers的GMAP3示例，但监听单击事件。考虑到这一点，我修改了GMAP3的示例，并将mouseenter事件更改为click事件，并取消了mouseleave事件。

对于那些想要进一步尝试的人，我创建了一个jsFddle示例。

以下是源代码：

<!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版本。 - Tony Miller
0

你的问题并没有提供太多细节，但也许你需要类似这样的东西：

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

编辑：这可能适用于您...

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

如果你在谷歌上搜索该行代码，你将获得更多的指引...祝好运！

两种方法都没用，我已经在问题中更新了我的尝试。如果需要更多细节，请告诉我。谢谢。 - Evanss
再次更新。我没有意识到你的代码应该合并到现有代码中，而不是添加到末尾。 - Evanss
2
google.maps.event.addListener(marker, 'click', toggleBounce); 实际上是向 Google 地图 API v3 对象添加监听器的方法。 - slawekwin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接