Ползунок изображений в информационном окне Google Maps

У меня появляется всплывающее окно Infobox (информационное окно с дополнительными элементами управления), когда пользователь нажимает на маркер на карте. В этом всплывающем окне я сейчас пытаюсь вставить слайдер изображений jQuery, в частности NivoSlider.

Проблема. Однако этот слайдер изображений работает только на обычной HTML-странице и вообще не работает в информационном окне. Мне нужно, чтобы изображение работало внутри информационного окна.

Код jQuery/JS

Часть, которая загружает слайдер изображений jQuery, заключена в <div id="slider class="nivoSlider"><img...../><img....../></div>"

$(window).load(function() {

$('#слайдер').nivoSlider(); //загружает нивослайдер в div #slider

$("#search_button").click(function(e){ e.preventDefault(); var search_location = $("#search_location").val(); $.getJSON(.......... ..............., функция () {

        for( i = 0; i < json.length; i++) {

            // Place markers on map
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
            markers.push(marker);

            // Create infowindows
            var boxText = '<div id="infobox"> \
                                <div id="infobox_header_title"> \
                                    <span id="infobox_header_price">$' + json[i].price + '</span> \
                                    <span id="infobox_header_room">' + json[i].bedroom + 'br </span> \
                                    <span id="infobox_header_address">' + json[i].address_1 + '</span> \
                                </div> \
                                <div id="slider" class="nivoSlider"> \
                                    <img src="/images/cl/' +  json[i].photos[0] + '.jpg" /> \
                                    <img src="/images/cl/' +  json[i].photos[1] + '.jpg" /> \
                                </div> \
                            </div>';
            var infoboxOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: { 
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: true,
                pane: "floatPane",
                enableEventPropagation: false
                };

            var infobox = new InfoBox(infoboxOptions);
            infobox.open(map, markers[i]);
            infoboxes.push(infobox);

            // Create Listeners
            markers[i]._index = i;
            google.maps.event.addListener(markers[i], 'click', function() {

                //infoboxes[this._index].open(map, markers[i]);
                infoboxes[this._index].show();

            });
        };

        // Fill screen with markers
        mapAutoCenter(markers);

    });

Что, по моему мнению, является причиной этого: Вероятно, это связано с тем, что <div> в информационном поле не создается, когда $('#slider').nivoSlider() вызывается в самом начале.

Дополнительная информация: я использую Google Maps API V3 с PHP и фреймворком Codeigniter.


google-maps javascript jquery google-maps-api-3 nivo-slider
person Nyxynyx    schedule 22.10.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Ползунок работает путем привязки прослушивателя событий, который будет потерян, когда infoWindow будет удален из дерева DOM (карты Google удаляют infoWindow из дерева DOM, когда он не виден). Даже когда появится информационное окно, слушателя все равно не будет.

Вам придется переписать часть прослушивателя слайдера вашего плагина NivoSlider. Вот некоторые рекомендации.

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

$.fn.nivoSlider.handlers = {
    sliderClickHandler: function (event) {
        // register mousemove and mouseup handlers
        $(document).bind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
        $(document).bind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
    }, 

    sliderMMoveHandler: function (event) {
        // process mousemove event (move the slider, change images, etc. put your logic here)
    },

    sliderMouseupHandler: function (event) {
        // unregister the listeners since the click event has completed
        $(document).unbind('mouseup', $.fn.nivoSlider.handlers.sliderMouseupHandler)
        $(document).unbind('mousemove', $.fn.nivoSlider.handlers.sliderMMoveHandler);
    }
};

Теперь зарегистрируйте sliderClickHandler непосредственно в HTML как событие onclick:

<div id="slider" class="nivoSlider" onclick="$.fn.nivoSlider.handlers.sliderClickHandler()">

Обратите внимание, вы не могли бы сделать что-то вроде этого:

onclick="sliderClickHandler()"

потому что вы помещаете слушателя непосредственно в элемент DOM, который будет выполняться из глобального пространства (и не будет иметь никакого другого связанного с ним пространства имен, в отличие от типичного javascript, где мы так привыкли к функциям, которые являются замыканиями и инкапсулируют/запоминают, где они были определены).

С этим обходным решением есть одна серьезная проблема (но я не могу придумать лучшего способа сделать это). Если на вашей странице будет более одного NivoSlider (что, вероятно, и будет), то, естественно, вы захотите, чтобы функции обработчика вели себя по-разному в зависимости от того, с каким NivoSlider вы взаимодействуете. Поскольку вы не можете создавать обработчики на лету как замыкания для каждого экземпляра, вам нужно будет иметь уникальный идентификатор для каждого NivoSlider, и обработчик должен будет действовать в зависимости от того, какой идентификатор в настоящее время является активным объектом. (Поэтому вам придется где-то хранить текущий активный идентификатор NivoSlider).

Удачи. Определенно выполнимо, хотя и не очень весело.

person achow    schedule 22.10.2011
comment
Спасибо за ответ! Я все еще пытаюсь справиться с этим ... У меня также есть еще одна проблема с выбором div в информационном поле с использованием jquery $('#gallery'), я только что создал отдельный вопрос по этому поводу, есть идеи по этому поводу? stackoverflow .com/questions/7859275/ - person Nyxynyx; 22.10.2011