带有点击处理程序和滚动条的Google地图信息框 [英] Google Maps InfoBox with click handlers and scrollbar

问题描述

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

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

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

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

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

对我来说，enableEventPropagation = false会解决这两个问题是合理的，因为我不明白为什么点击事件需要传播到地图以激发处理程序I附加到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 
}; 
  

解决方案

为防万一你还在研究这个，当鼠标进入信息框时，您需要更改地图选项以关闭平移/缩放。你可以使用像这样的东西：

  $（document）.delegate（div＃ib，mouseenter，function ）{
 
 theMap.setOptions（{
 draggable：false，
 scrollwheel：false 
}）; 
 console.log（mouse enter detected ）; 
 
}）; 
 $ b $（document）.delegate（div＃ib，mouseleave，function（）{
 theMap.setOptions（{
 draggable：true，
 scrollwheel：true 
}）; 
 console.log（mouseleave detected）; 
}）; 
  

I have an application using the Google Maps javscript API and the Infobox plug-in (customizable version of the native InfoWindow).

It was working fine until I had the following use-case: I need an Infobox with a scrollbar if the content is big, and it also needs to contain a couple of HTML elements with click listeners.

What I usually have to do to support click handlers inside an infobox is to set enableEventPropagation= true, and use jQuery delegate to set the click handler. jQuery delegate does not work if I do not allow event propagation.

This worked fine until I had to combine it with having a functioning scrollbar! What I have found is that the scrollbar will only work if I have enableEventPropagation= false, because if event propagation is enabled the drag event is just passed to the map and interpreted as panning.

Does anyone know what I can do to both have a functioning scrollbar on the infobox content, and be able to set click handlers on some of the conent?

To me it would sound logical that enableEventPropagation=false would solve both issues, since I don't understand why the click event needs to be propagated to the map in order to fire the handlers I attach to the html elements.

This is the setup-object for my 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
};

解决方案

Just in case you're still working on this one, you need to change your map options to turn off panning/zooming when the mouse enters the infobox. You can use something like this:

$(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地图信息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！