ООО ЭкоЮнит
FAQSearchMemberlistUsergroupsFilesLog inRegisterГлавная
printer-friendly view
 
AuthorMessage
Sergey Gender:Male


Местный босс - администратор


Joined: 06 Jan 2005
Show/Hide

Описание

Класс DGControlMiniMap реализует элемент управления "обзорная карта" аналогичный API Яндекс-карт или Google Maps, который вы можете поместить на карту 2GIS. Создает уменьшенную карту показываемой местности, коэффициент масштабирования которой на несколько пунктов больше или меньше основной карты. Изображения на основной карте или миникарте меняются синхронно при передвижении или изменении масштаба.

Чтобы задать величину смещения между коэффициентами масштабирования обзорной и основной карты, необходимо передать значение в конструктор обзорной карты (по умолчанию -5).
Если смещение отрицательное, то масштаб обзорной карты будет меньше основной, то есть обзорная карта будет охватывать более крупный фрагмент, чем основная.
Если смещение положительное, то обзорная карта будет работать по принципу лупы, то есть отображать увеличенный фрагмент карты.

Разработано с целью увеличения функционала карт 2GIS автором этих строк ( Sergey aka Porutchik aka Поручик) на базе плагина Leaflet.MiniMap и c использованием материалов руководства по API 2GIS после завершения разработки мода для вставки карт на форумах. Используются только штатные методы API, никаких других сторонних библиотек.

Использование элемента управления

Скрипт DGControlMiniMap.js залить на сервер в выбранную папку. Скачать скрипт можно ниже после примеров.
На веб-странице поместить строку вызова после загрузки основной библиотеки карты.

Code:
<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>

<script type="text/javascript" src="папка_скрипта/DGControlMiniMap.js"></script>


Далее создать HTML-контейнер и экземпляр карты 2GIS.

Code:

<div id="MapId" style="width:500px; height:400px"></div>
<script type="text/javascript">
<!--
    // Создание карты:
    map = new DG.Map('MapId');
    //Какие-то ещё действия с картой
    
    //Подключаем мини-карту с заданными опциями или без них.

    //Параметры:
    // map - тип DG.Map - объект карты. Обязательный.
    // options - стандартный тип объекта JavaScript или ассоциированный массив - опции мини-карты. Необязательный.

    new DGControlMiniMap(map, {
        buttonPosition: DG.ControlPosition.BOTTOM_LEFT, minimized:true,
        position:DG.ControlPosition.BOTTOM_LEFT, toggleDisplay:true
    });
-->
</script>


Подробный пример показан ниже.

Доступные опции элемента управления

  • position: стандартная константа API 2GIS вида DG.ControlPosition. Определяет положение элемента на основной карте. По умолчанию DG.ControlPosition.BOTTOM_RIGHT (правый нижний угол).

  • buttonPosition: стандартная константа API 2GIS вида DG.ControlPosition. Определяет положение кнопки переключения видимости на обзорной карте. По умолчанию DG.ControlPosition.BOTTOM_RIGHT (правый нижний угол).

  • autoPositionButton: тип булево (true, false) - расположение кнопки переключения видимости определяется положением самой обзорной карты, при этом опция buttonPosition игнорируется. Например, если мини-карта располагается в левом нижнем углу основной, то кнопка будет располагаться тоже в левом нижнем углу мини-карты. По умолчанию false.

  • top, left: тип число - отступы обзорной карты в пикселях от границ основной карты, соответственно по вертикали и горизонтали. По умолчанию 1.

  • height, width: тип число - размеры контейнера обзорной карты в пикселях, соответственно высота и ширина. По умолчанию 150.

  • minimized: тип булево (true, false) - признак того, что обзорная карта свёрнута. По умолчанию false.

  • toggleDisplay: тип булево (true, false) - признак кнопки переключения видимости (). По умолчанию: true.

  • autoToggleDisplay: тип булево (true, false) - признак того, будет ли обзорная картв сворачиваться автоматически, если границы основной карты не входят
    в диапазон границ миникарты. Полезно при указанном параметре zoomLevelFixed. По умолчанию false.

  • zoomLevelOffset: тип число - величина смещения между коэффициентами масштабирования обзорной и основной карты. По умолчанию -5.

  • zoomLevelFixed: тип число - фиксированная величина масштабирования миникарты независимо от масштаба основной карты. Обычно используется, если не указан параметр zoomLevelOffset. По умолчанию false.

  • aimingRectOptions: тип DG.Style.Geometry - стиль "прицельного" прямоугольника в середине обзорной карты. По умолчанию с синим контуром толщиной 1px и с полупрозрачной розовой заливкой. Опция работает, если величина zoomLevelOffset или zoomLevelFixed отрицательная.

  • hideText: тип строка - строка для всплывающей подсказки кнопки переключения, если карта развёрнута. По умолчанию - 'Hide MiniMap'.

  • showText: тип строка - строка для всплывающей подсказки кнопки переключения, если карта свёрнута. По умолчанию - 'Show MiniMap'.

Примеры работы

Code:

<!-- Подключаем библиотеку API 2GIS -->
<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>

<!-- Подключаем плагин обзорной карты -->
<script type="text/javascript" src="DGControlMiniMap.js"></script>

<!-- Создаём HTML-контейнеры для карты -->
<div id="map1" style="width:500px; height:400px"></div>  <div id="map2" style="width:500px; height:400px"></div>

<script type="text/javascript">
<!--
    // Создание первой карты:
    map = new DG.Map('map1');
    map.setCenter(new DG.GeoPoint(55.0975003365844, 51.7675530461013), 11); // центр г. Оренбурга
    map.disableScrollZoom();
    map.enableDragging();

    // Подключаем элемент управления обзорная карта с заданными опциями:
    new DGControlMiniMap(map, {
        position: DG.ControlPosition.BOTTOM_LEFT, // в левом нижнем углу
        zoomLevelOffset: 3, // режим лупы
        buttonPosition: DG.ControlPosition.BOTTOM_LEFT, // кнопка переключения в левом нижнем углу обзорной карты
        minimized: true, // в свёрнутом состоянии
        showText: 'Показать мини-карту',
        hideText: 'Свернуть мини-карту'
    });

    // Создание второй карты:
    map1 = new DG.Map('map2');
    map1.setCenter(new DG.GeoPoint(50.197509869605,53.222076873678), 11); // г. Самара, ул. Гастелло
    map1.disableScrollZoom();
    map1.enableDragging();

    // Подключаем элемент управления обзорная карта с опциями по умолчанию:
    new DGControlMiniMap(map1);
-->
</script>




При наличии интереса со стороны сообщества и финансового стимулирования, плагин будет совершенствоваться и дополняться.


Download DGControlMiniMap.js (12.39 KB). Added/Updated Sat 09 Nov, 2013 01:37. Downloaded 39 Time(s).
Подключаемый скрипт с плагином. Версия 1.0.3


_________________
Профессионал - это тот же дилетант, только знающий где ошибется. Генератор db_update.php для phpBB2 с некоторыми удобствами.
Как ставить моды. Что такое [SQL] и с чем его едят | Как правильно задавать вопросы и получать адекватные ответы | Правила форума
Бесплатная техподдержка только на форуме! Не надо стучаться в аську, скайп, слать емайлы, пытаться писать в приват. Спасибо за понимание. Please do not PM, ICQ, Skype or email me for support help - you won't get any reply. If you have a question or issue, post it in the appropriate forum/topic. Thanks!
Back to topOffline View user's profile Visit poster's website Skype Name
Владимир1971 Gender:Male

Постоянный клиент


Joined: 22 Jun 2010
Show/Hide

В Гугле Chrome странно работает. Зашёл на страницу, кликнул показать мини-карту и изображение исчезло. Просто розовый фон и надпись 2 гис. После перезагрузки страницы карта не исчезала.

В ИЕ 11 без глюков,
Back to topOffline View user's profile
Display posts from previous:   

Summary Rating For >> DGControlMiniMap - плагин обзорной (мини-карты) для карт 2GIS (2ГИС)
Average Rating: 0.00 :: Min Rating: 0 :: Max Rating: 0 :: Number of Ratings: 0
Choose Rating: 1   2   3   4   5  

Similar Topics
Topic Author Forum Replies Last Post
No new posts Интерактивная проверка полей ввода на JavaScript (плагин Jquery)
В процессе доработки очередного веб-проекта потребовалось организовать проверку корректности вводимых данных (ИНН, КПП, номеров счетов и прочих нужных вещей) непосредственно на странице без её перезагрузки. Можно было
Sergey Прочие технические вопросы (php, javascript, perl и другое) 3 Wed 15 Jun, 2016 14:20 View latest post
Sergey
No new posts Мод bbCode Display Maps for phpBB2 (вставка Яндекс-карты, Google Maps, 2GIS, MapBox в сообще...
Название мода: bbCode Display Maps for phpBB2 Описание мода: Позволяет вставить в текст сообщения интерактивные карты Яндекса, Google, 2GIS, MapBox. Description: This MOD allows to insert the Yandex maps, Google Maps,
Sergey Поддержка и моды для phpBB2 36 Tue 28 Feb, 2017 09:39 View latest post
vlad77
This topic is locked: you cannot edit posts or make replies. bbCode для вставки Яндекс-карты, Google Maps, 2GIS (обсуждение концепции)
Неужели живы еще обладатели двоек? :) Как я рад вас видеть) Столкнулся с такой задачей. Хочу сделать бб-код карт в таком виде: Code [map]Москва, улица Тверская, 31[/map] Code Работает через API Яндекса/Гугла/2ГИСа,
Mac Поддержка и моды для phpBB2 30 Mon 29 Apr, 2013 23:45 View latest post
Sergey






All times are UTC + 3 hours
Users browsing this topic:
Registered Users: None

Jump to:   
printer-friendly view
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum
/a
Username:

Password:

Log me on automatically each visit
  Яндекс.Метрика
CrackerTracker © 2004 - 2018 CBACK.de