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 回答