我需要一个等待点击的事件监听器。不幸的是,它与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
}
});