Question

我使用jquery-ui-map并且非常喜欢它。

演示文件JQUERY-UI-MAP包含一个“分页”示例，它将根据地图上的标记“填充”自身。（SAMPLE）

我希望根据地区（欧洲，非洲，北美洲，南美洲等）进行“预定义”分页。

我们在地图上有大约3000个带有聚类和过滤的标记。

pagnation / navigation可以“在地图上”或在侧边栏中。

目标是：访问者点击“EUROPE”，地图以给定的缩放系数为中心到某个给定的坐标。我们将添加大约20个区域 - 一个2或3个“固定”坐标的样本应该是非常有用的。

这就是“自动”分页的工作原理：

( function($) {
    $.extend($.ui.gmap.prototype, {
        /**
         * Page through the markers. Very simple version.
         * @param prop:the marker property to show in display, defaults to title
         */
        pagination: function(prop) {
            var $el = $("<div id='pagination' class='pagination shadow gradient rounded clearfix'><div class='lt btn back-btn'></div><div class='lt display'></div><div class='rt btn fwd-btn'></div></div>");
            var self = this, i = 0, prop = prop || 'title';
            self.set('p_nav', function(a, b) {
                if (a) {
                    i = i + b;
                    $el.find('.display').text(self.get('markers')[i][prop]);
                    self.get('map').panTo(self.get('markers')[i].getPosition());
                }
            });
            self.get('p_nav')(true, 0);
            $el.find('.back-btn').click(function() {
                self.get('p_nav')((i > 0), -1, this);
            });
            $el.find('.fwd-btn').click(function() {
                self.get('p_nav')((i < self.get('MarkerClusterer').length - 1), 1, this);
            });
            self.addControl($el, google.maps.ControlPosition.TOP_LEFT);         
        }
    });
} (jQuery) );

谢谢

带有“分页”或“侧边栏导航”的jquery-ui-map（谷歌地图）

0 个答案: