Question

我有一个使用Google Maps 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
};

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

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

1 个答案: