Question

当用户点击地图上的标记时，我正在使用信息框（具有更多控件的Infowindow）弹出窗口。在这个弹出窗口中，我目前正在尝试插入一个jQuery图像滑块，特别是NivoSlider。

问题： 但是，此图像滑块仅在普通HTML页面上有效，并且在信息框内部时根本不起作用。我需要图像在内部信息框中工作。

jQuery / JS代码

加载jQuery图像滑块的部分由<div id="slider class="nivoSlider"><img...../><img....../></div>"

括起来

$(window).load(function() {

$（ '＃滑块'）nivoSlider（）; //在div #slider

中加载nivoslider

$（ “＃search_button”）。单击（函数（E）{ e.preventDefault（）; var search_location = $（“＃search_location”）。val（）; $ .getJSON（.........................，function（）{

        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框架。

Answer 1

滑块通过绑定事件侦听器来工作，当从DOM树中删除infoWindow时，该事件侦听器将丢失（当不可见时，Google地图会从DOM树中删除它）。即使出现infoWindow，听众仍然会消失。

您必须重写NivoSlider插件的滑块侦听器部分。这是一些指导。

编写一个单击处理程序，mousemove处理程序和一个mouseup处理函数并将其放在某处（可能在NivoSlider插件内部，这样就不会污染gloal空间）。像这样：

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

现在，直接在HTML中注册sliderClickHandler作为onclick事件：

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

注意，你做不到这样的事情：

onclick="sliderClickHandler()"

因为你将侦听器直接放入将从全局空间执行的DOM元素（并且不会有任何其他命名空间绑定到它，不像典型的javascript，我们习惯于将其作为闭包和封装/记住他们被定义的地方。）

此解决方法存在一个主要问题（但我无法想到更好的方法）。如果您的页面上有多个NivoSlider（您可能会这样），那么您自然会希望处理程序函数的行为有所不同，具体取决于您正在与哪个NivoSlider进行交互。由于您无法动态创建处理程序作为每个实例上的闭包，因此每个NivoSlider必须具有唯一的ID，并且处理程序必须根据当前哪个ID是活动对象来执行操作。（所以你必须在某处存储当前活动的NivoSlider的ID。）

祝你好运。绝对可行，但不是很有趣。

Google Maps Infobox中的图像滑块

1 个答案: