谷歌地圖信息框與點擊處理程序和滾動條

我有一個應用程序使用谷歌地圖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或其他一些奇怪的東西。謝謝！ –

谷歌地圖信息框與點擊處理程序和滾動條

回答

相關問題