Google Maps InfoBox с обработчиками кликов и полосой прокрутки

Question

У меня есть приложение, использующее JavaScript API Карт Google и плагин 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");
});