带有单击处理程序和滚动条的谷歌地图InfoBox

Question

我有一个使用Google Maps javscript API和Infobox插件(本地InfoWindow的可定制版本)的应用程序。

它一直工作得很好，直到我有了以下用例:如果内容很大，我需要一个带有滚动条的Infobox，它还需要包含几个带有click listeners的HTML元素。

为了在infobox中支持点击处理程序，我通常需要做的是将enableEventPropagation=设置为true，并使用jQuery委托来设置点击处理程序。如果我不允许事件传播，jQuery委托将不起作用。

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

有没有人知道我可以做些什么，既能在infobox内容上有一个正常工作的滚动条，又能在一些内容上设置点击处理程序？

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

这是我的Infobox的设置对象：

{
        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
};

Answer 1

如果你还在做这件事，你需要改变你的地图选项，在鼠标进入infobox时关闭平移/缩放。您可以使用类似以下内容：

$(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");
});