将事件处理程序附加到Google地图信息气泡中的元素 [英] Attach event handler to element inside google maps info bubble

问题描述

使用jQuery和google maps v3，我可以放置一个地图标记和一个事件监听器当用户点击标记时会打开一个infobubble。我想做什么（但到目前为止还没有弄清楚）是为信息泡泡的内容添加另一个事件处理程序。例如，如果用户点击地图标记打开信息泡泡（该部分起作用），然后如果他们点击泡泡内的某些东西做其他事情。我已经粘贴了下面的代码，提前感谢您的帮助。

  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 \>获取关于+ 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]，'click'，function（）{
 alert（hi）; 
 }）; 
}）; 
 bubble.open（map，marker）; 
} 
}）; 
 
  

解决方案

您正在尝试添加click元素上的事件，它不是 DOM元素。 $（'。bubble-details-button'）不是 DOM元素（它是 DOM元素），但是 $（'。bubble-details-button'）[0] 是。另一方面，当您尝试添加点击事件时，内容尚未创建。只有在已经创建了内容元素的情况下，您才能处理（例如添加事件）内容的元素。 InfoBubble 会触发domready事件，其内容将被创建。所以您需要处理它：

  if（！bubble.isOpen（））{
 google.maps.event.addListenerOnce（bubble，'domready' ，function（）{
 google.maps.event.addDomListener（$（bubble.getContent（））。find（'。bubble-details-button'）[0]，'click'，function（）{
 alert（hi）; 
}）; 
}）; 
 bubble.open（map，mymarker）; 
} 
  




I have a question regarding google maps and event handling/listening.

Using jQuery and google maps v3, I am able to place a map marker and an event listener that opens an infobubble when the user clicks on the marker. What I'd like to do (but so far haven't been able to figure out) is add another event handler to the contents of the info bubble. For example, if the user clicks on the map marker open the info bubble (that part works), and then if they click on something inside the infobubble do something else. I have pasted my code below, thanks in advance for any help

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], 'click', function(){ 
                    alert("hi"); 
                }); 
            });
            bubble.open(map, marker); 
        }     
    });
}  

解决方案

You are trying to add "click" event on element ,which is not DOM Element. $('.bubble-details-button') is not DOM Element (it is a wrapper of DOM Element), but $('.bubble-details-button')[0] is.

On the other hand, when you are trying to add "click" event, the content is not created yet. You can work(e.g. add events) with content's elements ,only when they are already created. The InfoBubble will trigger "domready" event, when its content will be created.So you need to handle it:

 if (!bubble.isOpen()) {
    google.maps.event.addListenerOnce(bubble, 'domready', function(){
        google.maps.event.addDomListener($(bubble.getContent()).find('.bubble-details-button')[0], 'click', function(){
            alert("hi");
        });
    });
    bubble.open(map, mymarker);        
}

这篇关于将事件处理程序附加到Google地图信息气泡中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！