jquery-ui-map (Google Maps) с "разбиением на страницы" или "боковой панелью навигации"

Я использую jquery-ui-map и мне очень нравится.

Демонстрационные файлы JQUERY-UI-MAP содержат образец "нумерации страниц", который "сам заполнится" на основе маркеров на карте. ( ОБРАЗЕЦ)

Я хотел бы иметь "предопределенную" нумерацию страниц по регионам (Европа, Африка, Северная Америка, Южная Америка и т. Д.)

У нас на карте около 3000 маркеров с кластерами и фильтрацией.

Разметка / навигация может быть "сверху карты" или на боковой панели.

Цель: посетитель нажимает на "ЕВРОПА", и карта центрируется на некоторых заданных координатах с заданным коэффициентом масштабирования. Мы добавим около 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) );

благодарю вас

0 ответов

Другие вопросы по тегам