Блог

У меня есть приложение, использующее API javscript Google Maps и подключаемый модуль 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
};
  

На всякий случай, если вы все еще работаете над этим, вам нужно изменить параметры карты, чтобы отключить панорамирование / масштабирование при наведении курсора мыши на информационное поле. Вы можете использовать что-то вроде этого:

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