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

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

本文介绍了JavaScript点击事件的任何谷歌地图标记?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当任何Google地图标记点击时,我需要做些事情。我使用此链接中的演示作为出发点:



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需要更接近,但收听点击事件。考虑到这一点,我修改了GMAP3的例子,并将鼠标事件改为click事件,并摆脱了mouseleave事件。



对于那些想要进一步玩的人,我创建了。





<!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点击事件的任何谷歌地图标记?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 16:08