Question

我需要一个等待点击的事件监听器。不幸的是，它与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没有报告任何错误。

Answer 1

试试这个：

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

Answer 2

如果您使用的是InfoBubble的编译版本，则.bubble_参考将丢失。您必须找到.bubble_已被更改的内容。如果您尚未编译自己并且已使用提供的编译版本，则.bubble_引用为 .e 。示例：

$(infoBubble.e).find("#yourdiv").live("click",function(event) {
    console.log(event.target.id);
});

Answer 3

google.maps.event.addDomListener(infoBubble.bubble_, 'click', function() {
    alert("Ooo..!");
});

有效！

Answer 4

进一步改善@ Marius＆＃39;回答，以及为当前版本的jQuery更新它（假设我可以看到OP有jQuery可用），请尝试以下方法来定位infoBubble中特定元素的click事件：

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

如果您需要将数据传递给您的函数，一个选项是使用data- *属性并通过事件 target 获取它，如下所示：

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
    }
});

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

4 个答案: