无法在 Google 地图信息框上添加事件答案

【问题标题】：Unable to add event on Google map Infobox无法在 Google 地图信息框上添加事件
【发布时间】：2012-09-12 16:56:28
【问题描述】：

我正在使用带有 Google Map V3 的 Infobox（附图）。单击信息框时，我想转到详细信息页面。但我无法在信息框上添加点击监听器。这是我正在使用的代码：

这是我的信息框配置：

    var ib = new InfoBox({
        alignBottom : true,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-125, -50),
        zIndex: null,
        closeBoxURL: "",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation:false
    });

我在这个信息框中添加了监听器，如下所示：

    google.maps.event.addListener(ib, 'domready', function() {
        if(Ext.get(ib.div_)){
            Ext.get(ib.div_).on('click', function(){
                console.log('test on click')
            }, this);

            Ext.get(ib.div_).on('mousedown', function(){
                console.log('test on click')
            }, this);
        }
    });

enableEventPropagation = false 时，该事件不会传播到 MAP，但信息框上没有任何事件正在运行。

虽然enableEventPropagation = true，事件（单击、鼠标按下）有效，但单击信息框的其他部分时，我需要映射或其他标记。

知道如何解决这个问题吗？

【问题讨论】：

您的问题解决了吗？如果是，请与我们分享您的答案。

标签： javascript google-maps-api-3 dom-events sencha-touch-2 infobox

【解决方案1】：

您需要将 domready 事件添加到 infobox 的 eventListener 而不是谷歌地图的事件。只有在 infobox 的 html 出现在屏幕上后，您才能绑定事件。为防止多事件绑定，请在加载新信息框之前关闭其他信息框。

infobox= new InfoBox();
google.maps.event.addListener(marker, 'click', function() {
  infobox.close();
  infobox= new InfoBox({ ... });
  infobox.open(map, this);
  infobox.addListener("domready", function() {
    $("#target").on("click", function(e) { /* do something */ });
  });
});

【讨论】：

【解决方案2】：

您可以将侦听器附加到 InfoBox 的任何内容。

var boxText = document.createElement('div'); 
var myOptions = {
  content: boxText,
   ... 
}
var ib = new InfoBox(myOptions);
ib.open(theMap, marker);
boxText.setAttribute('onclick', 'alert("InfoBox clicked")');

这对你有用吗？

【讨论】：