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

Question

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

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

jQuery/JS 代码

加载 jQuery 图像滑块的部分由

"

$(window).load(function() {

$('#slider').nivoSlider(); //加载div #slider中的nivoslider

$("#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() 时未创建信息框中的

相关

附加信息：我正在使用 Google Maps API V3，以及 PHP 和 Codeigniter 框架。

Answer 1

滑块通过绑定一个事件监听器来工作，当 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);
    }
};

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

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

注意，您不能执行这样的操作：

onclick="sliderClickHandler()"

因为您将侦听器直接放入 DOM 元素中，这将导致从全局空间执行（并且不会有任何其他名称空间绑定到它，这与典型的 javascript 不同，我们习惯于将函数作为闭包并封装/记住它们的定义位置）。

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

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