无法在谷歌地图上添加事件信息框。

Question

我正在使用Infobox与谷歌地图V3（附图）。当点击Infobox时，我想进入一个详细的页面，但我无法在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事件（点击，鼠标放下）工作，但点击信息框的其他部分，它带我到地图或其他标记。

任何想法如何解决这个问题？

Answer 1

你需要添加 domready 事件到infobox的eventListener而不是google地图的。只有在信息框的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 */ });
  });
});

Answer 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")');

这对你有用吗？