Google 地图信息框中的图像滑块

Question

当用户单击地图上的标记时，我会弹出信息框（带有更多控件的信息窗口）。在这个弹出窗口中，我目前正在尝试插入一个 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(......................, 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);

    });

我认为是什么原因造成的：可能与在开始时调用 $('#slider').nivoSlider() 时未创建信息框中的 <div> 有关

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

Answer 1

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

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

编写一个 click 处理程序、mousemove 处理程序和一个 mouseup 处理程序函数并将其放在某个地方（可能在 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);
    }
};

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

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

注意，你不能这样做：

onclick="sliderClickHandler()"

因为您将侦听器直接放入将从全局空间执行的 DOM 元素（并且不会绑定任何其他命名空间，这与我们习惯于闭包和封装的典型 javascript 不同/记住它们是在哪里定义的）。

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

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