Google Maps API - InfoBubble 的事件侦听器不起作用



我需要一个等待点击的事件监听器。不幸的是,它与InfoWindows的工作方式在这里似乎不起作用。。。

这是我的InfoBubble:

var infoBubble = new InfoBubble({
      map: map,
      content: $('#my-div').html(),
      position: new google.maps.LatLng(areas[area].lat, areas[area].lng),
      shadowStyle: 1,
      padding: 0,
      borderRadius: 0,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#ccc',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 15,
      arrowStyle: 0
    });

这是我的听众:

google.maps.event.addListener(infoBubble, 'click', function(){
        console.log("noodle");  
    });

顺便说一句,Firebug没有报告任何错误。

试试这个:

$(infoBubble.bubble_).live("click", function() {
    console.log('clicked!');
});

如果您使用的是InfoBubble的编译版本,.bulle_引用将丢失。你必须找到.bulle_变成了什么。如果您还没有编译自己的版本,并且使用了提供的编译版本,则.bulle_引用为.e。示例:

$(infoBubble.e).find("#yourdiv").live("click",function(event) {
    console.log(event.target.id);
});
google.maps.event.addDomListener(infoBubble.bubble_, 'click', function() {
    alert("Ooo..!");
});

它有效!

要进一步改进@Marius的答案,并将其更新为当前版本的jQuery(鉴于我可以看到OP有jQuery可用),请尝试以下操作将点击事件定位在infoBubble中的特定元素上:

$(infoBubble.bubble_).on("click", "button.close", function() {
    console.log("Button with class .close clicked.");
});

如果您需要将数据传递给您的函数,一种选择是使用data-*属性并通过事件目标获取数据,如下所示:

InfoBubble内容的示例JS:

var myVariable = 10;
var infoBubbleContentString = '<span class="my-style" data-id="' + myVariable + '">Button text</span>';

事件处理程序:

$(infoBubble.bubble_).on("click", ".my-style", function (e) {
    if ($(e.target).data('id')) {
        var myVariableValue = $(e.target).data('id'); // myVariableValue will equal 10
    }
});

相关内容

  • 没有找到相关文章

最新更新