Question

有没有人试图在Google Map InfoWindow中添加简单的分页？有时我在同一个位置有多个项目，目前我的infoWindow显示所有这些项目由水平规则分隔。我想这样做，如果该位置有多个标记，infowindow保持相同的大小，但有一个上一个/下一个按钮，允许用户对可用数据进行分页。

有什么想法？这甚至可能吗？

更新

到目前为止，我已尝试使用jquery jPages插件，如下所示：

google.maps.event.addListener(cbMapMarker[x], 'click', function(){              
     cbMapInfoWindow.setContent(infoWindowPaginate(cbMapInfoContent[x]));                           
     cbMapInfoWindow.open(cbMap,cbMapMarker[x]);
     $('#cboxLoadedContent iframe').contents().find('.infoWindowHolder').jPages({
          containerID : "infoWindowContainer"
     });                            
}); 


function infoWindowPaginate(infoWindowContent)
{
    // Define our opening and closing tags for the wrapping container
    var startWrap = '<div class="infoWindowHolder"></div><div id="infoWindowContainer">';
    var endWrap = '</div>';
    // Create a new variable containing the infoWindowContent wrapped with our tags
    var newContent = startWrap + infoWindowContent + endWrap;
    return newContent;  
}

传递给infoWindowPaginate函数的内容看起来像这样

<div><p>DATA 1 HERE</p></div><div><p>DATA 2 HERE</p></div>

到目前为止，我得到了＆lt; - prev和next - ＆gt;我的infoWindow中的文字，但仍然在努力。有关更好方法的任何建议吗？

JDFIDDLE http://jsfiddle.net/GuB92/1/

Answer 1

我明白了。我必须为infoWindow的domready事件添加一个监听器，并从那里调用我的jPages。现在工作得很好。

                    // Add event listener for the infoWindow 
                google.maps.event.addListener(cbMapInfoWindow, 'domready', function() {
                    $('#cboxLoadedContent iframe').contents().find('.infoWindowHolder').jPages({
                        containerID : "infoWindowContainer"
                    });
                });

<强>的jsfiddle

http://jsfiddle.net/GuB92/3/

Answer 2

您可以像滑块一样制作自己的自定义分页器。加载所有信息并显示第一个信息并隐藏所有信息然后保留您的页码和下一个上一个按钮执行点击事件的必要任务。你可以像任何其他jQuery插件一样。

Google Maps InfoWindow为多个标记添加分页

2 个答案: