带有点击处理程序和滚动条的 Google 地图信息框

Question

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

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

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

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

有谁知道我可以做些什么来让信息框内容上的滚动条正常工作，并能够在某些内容上设置点击处理程序？

对我来说，enableEventPropagation=false 可以解决这两个问题听起来合乎逻辑，因为我不明白为什么需要将点击事件传播到地图才能触发我附加到 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
};

Answer 1

以防万一您仍在处理此问题，您需要更改地图选项以在鼠标进入信息框时关闭平移/缩放。你可以使用这样的东西：

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