谷歌地图信息框与点击处理程序和滚动条

我有一个应用程序使用谷歌地图javscript API和Infobox插件（原生InfoWindow的可定制版本）。谷歌地图信息框与点击处理程序和滚动条

它工作正常，直到我有以下用例：如果内容很大，我需要一个带滚动条的信息框，并且它还需要包含一些带有点击监听器的HTML元素。

我通常要做的事情就是设置enableEventPropagation = true，并使用jQuery委托来设置点击处理程序，以支持信息框内的点击处理程序。如果我不允许事件传播，jQuery委托不起作用。

这工作得很好，直到我不得不把它与一个正常运行的滚动条结合！我发现，只有当我有enableEventPropagation = false时，滚动条才会起作用，因为如果启用了事件传播，则拖动事件仅传递给地图并解释为平移。

有谁知道我可以做些什么，在信息框内容上都有一个正常运行的滚动条，并且能够在某些内容上设置点击处理程序？

对我来说，这听起来合乎逻辑，enableEventPropagation = false将解决这两个问题，因为我不明白为什么click事件需要传播到地图，以激发我附加到html元素的处理程序。

这是设置对象为我的信息框：

{ 
     content: "[my html in here]", 
     disableAutoPan: false, 
     pixelOffset: new google.maps.Size(-77, 10), 
     boxClass: "infoBox", 
     infoBoxClearance: new google.maps.Size(18, 30), 
     closeBoxMargin: "14px 6px", 
     pane: "floatPane", 
     enableEventPropagation: true 
};

来源

2011-11-17 Knut Marius

以防万一你仍然在这一个工作，你需要更改地图选项，关闭平移/缩放当鼠标进入信息框。您可以使用这样的事情：

$(document).delegate("div#ib", "mouseenter", function() { 

    theMap.setOptions({ 
     draggable: false, 
     scrollwheel: false 
    }); 
    console.log("mouse enter detected"); 

}); 

$(document).delegate("div#ib", "mouseleave", function() { 
    theMap.setOptions({ 
     draggable: true, 
     scrollwheel: true 
    }); 
    console.log("mouseleave detected"); 
});

来源

2012-03-20 17:14:14

只是作为一个额外的疑难杂症...确保信息框的enableEventPropagation参数设置为true，否则它会吞噬像白鲸事件:) – nokturnal

ID选择$（“＃ ib“）比$（”div＃ib“）快，因为它是一个转换为document.getelementbyid（”ib“）的本机选择器。 –

我以为我疯了！我在“文件”上设置了事件代表团，但它仍然没有开火。我想也许谷歌地图制作iframe或其他一些奇怪的东西。谢谢！ –

谷歌地图信息框与点击处理程序和滚动条

回答

相关问题