1

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

问题： 但是，此图像滑块仅在普通 HTML 页面上有效，而在信息框内则根本无效。我需要图像在信息框内工作。

jQuery/JS 代码

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

$(window).load(function() {

$('#slider').nivoSlider(); //加载div中的nivoslider #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()

附加信息：我正在使用带有 PHP 和 Codeigniter 框架的 Google Maps API V3。

4

1 回答 1

2

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

您将不得不重写 NivoSlider 插件的滑块侦听器部分。这里有一些指导。

编写一个 click 处理程序、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 存储在某处）。

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

于 2011-10-22T04:36:39.370 回答