我有一个关于谷歌地图和事件处理/收听的问题.
使用jQuery和谷歌地图v3,我可以放置一个地图标记和一个事件监听器,当用户点击标记时打开一个信息.我想做的事情(但到目前为止还无法弄清楚)是在信息泡泡的内容中添加另一个事件处理程序.例如,如果用户点击地图标记打开信息气泡(该部分有效),然后如果他们点击信息块内的某些内容,则执行其他操作.我已粘贴下面的代码,提前感谢任何帮助
function addMarker(data) {
var myLatlng = new google.maps.LatLng(data.Latitude,data.Longitude);
var title = data.title? data.title: "";
var icon = $('#siteUrl').val() + 'img/locate.png';
var bubbleContentString = "<span class=\"bubble-details-button\">Get Details about " + title+ "</span>";
myInfoBubble = new InfoBubble({
content: bubbleContentString,hideCloseButton: true,backgroundColor: '#004475',borderColor: '#004475'
});
var myMarker = new google.maps.Marker({
position: myLatlng,map: map,title: title,icon: icon
});
addListenerToMarker(myMarker,myInfoBubble);
markerSet.push(myMarker,myInfoBubble);
}
function addListenerToMarker(marker,bubble){
console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
google.maps.event.addListener(marker,'click',function() {
if (!bubble.isOpen()) {
google.maps.event.addListenerOnce(bubble,'domready',function(){
console.log($(bubble.getContent()).find('.bubble-details-button')[0]);
google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0],function(){
alert("hi");
});
});
bubble.open(map,marker);
}
});
}
解决方法
您正在尝试在元素上添加“click”事件,而不是DOM元素. $(‘.bubble-details-button’)不是DOM元素(它是DOM元素的包装),但$(‘.bubble-details-button’)[0]是.
另一方面,当您尝试添加“click”事件时,尚未创建内容.只有在已经创建内容的元素时,您才能使用内容的元素(例如添加事件). InfoBubble将触发“domready”事件,当它的内容被创建时.所以你需要处理它：
if (!bubble.isOpen()) {
google.maps.event.addListenerOnce(bubble,function(){
google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0],function(){
alert("hi");
});
});
bubble.open(map,mymarker);
}
