Question

我有关于谷歌地图和事件处理/收听的问题。

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

Answer 1

您正尝试在元素上添加"click"事件，而不是DOM Element。 $('.bubble-details-button')不是DOM Element（它是DOM Element的包装），但$('.bubble-details-button')[0]是。"click"。

另一方面，当您尝试添加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); }事件，当其内容将被创建时。您需要处理它：

{{1}}

Answer 2

在我必须完成您所描述的内容的场景中，我直接在InfoBubble内容中包含JavaScript函数调用。我经常在InfoBubble中包含超链接，所以在这种情况下我会执行以下操作：1 - 编写JavaScript函数来处理超链接点击。 2 - 创建标记。 3 - 将单击事件处理程序附加到打开InfoBubble的标记。 4 - 定义InfoBubble的内容，以便直接嵌入InfoBubble内容中的JavaScript设置为通过调用步骤1中定义的JavaScript函数来处理click事件 - 类似于：

"<span>" +
     "<a href='javascript:showDetail(" + param1 + "," + param2 + ");'>" + 
      displayTextContent + "</a>" +
"</span>"

将事件处理程序附加到google maps info bubble中的元素

2 个答案: