javascript - Google map 信息框中的图像 slider

Question

当用户单击 map 上的标记时，我会弹出信息框(具有更多控件的信息窗口)。在此弹出窗口中，我目前正在尝试插入一个 jQuery 图像 slider ，特别是 NivoSlider。

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

jQuery/JS 代码

加载 jQuery 图像 slider 的部分包含在 <div id="slider class="nivoSlider"><img...../><img....../></div>" 中

$(window).load(function() {

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

$("#search_button").click(函数(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 框架。

Answer 1

slider 通过绑定(bind)一个事件监听器来工作，当 infoWindow 从 DOM 树中删除时该事件监听器将丢失(谷歌地图在 infoWindow 不可见时将其从 DOM 树中删除)。即使 infoWindow 出现，监听器仍然会消失。

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

编写一个点击处理程序、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 元素中(并且不会绑定(bind)任何其他命名空间，这与我们习惯于将函数作为闭包和封装的典型 javascript 不同/记住它们的定义位置)。

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

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