Руководство по продукту Содержание установка модуля «1с-битрикс: Интерактивная карта объектов»


Стационарные устройства, ноутбуки, планшеты



страница8/11
Дата16.02.2017
Размер5.29 Mb.
Просмотров2976
Скачиваний0
ТипРуководство
1   2   3   4   5   6   7   8   9   10   11

Стационарные устройства, ноутбуки, планшеты


В версии для стационарных устройств, ноутбуков и планшетов расширен стандартный интерфейс и введён дополнительный — с плавающими панелями.

Теперь список объектов не является обязательным при инициализации модуля – данные загружаются при клике на категорию (а также либо согласно переданным данным в соответствующий метод модуля, либо указанным категориям в адресной строке). Обработка адресной строки описана в разделе «Стартовый вид модуля», метод модуля в разделе «API модуля».

Все действия с категориями и объектами незамедлительно изменяют набор и содержание параметров адресной строки. Перезагрузка страницы, либо её открытие на другом компьютере приведёт к появлению тех же маркеров, выделенных категорий и списка видимых объектов. Если был открыт балун на маркере, он будет открыт. Если объекты для указанных категорий отсутствуют, они будут загружены и показаны.

Управление масштабом карты мы вынесли в виде кнопок «+» и «–». Рядом расположена кнопка полноэкранного режима, поведение которой описано далее.

Стандартный интерфейс


Применяется для формирования на странице всегда видимой области с картой. Область строится в месте вставки блока модуля с [id="bxMapContainer"] и ограничена по ширине.

Старт


По умолчанию стартует со списком неактивных категорий (как выделять категории и объекты при загрузке, описано далее в разделе «API модуля»). Список категорий строится на основании переданных (или догруженных) данных.

Сверху списка категорий расположено поле для фильтрации объектов и категорий по введённому тексту.

Категории, в которых вложены другие, отмечены с левой стороны треугольником и по умолчанию вложенные категории скрыты. К таким категориям не должно быть привязано объектов.

Категории, для которых не загружены объекты, выглядят полупрозрачными. Это сделано для динамической фильтрации объектов, когда категории, в объектах которых не найдено соответствия введённому тексту, скрываются. Полупрозрачные категории не скрываются, а анализ производится в момент загрузки объектов. Категория становится обычной, и, если соответствия не найдено, она скрывается. На данный момент более элегантного решения мы не нашли.

Если маркеры расположены слишком плотно, они преобразовываются в кластер, клик на котором приведёт к изменению масштаба карты, при котором видны все маркеры, входящие в кластер. Если же объекты расположены по одному адресу, то иконка маркеров заменяется на свою иконку.

Выделение категорий


При клике на категории с вложением разворачивается список вложенных категорий. Вложенные категории также могут иметь вложения.

При клике на обычную категорию строится список объектов и маркеры, соответствующие им, появляются на карте. При повторном клике объекты, а маркеры скрываются.

Список объектов свёрнут и отображается в виде плашки с названием.

При клике на плашку объектов список разворачивается. В описании каждого объекта есть кнопка для выделения маркера и ссылки с внешними ссылками и телефонами (если они есть в описании объекта).

Повторный клик на плашке объектов свернёт список, чтобы открыть карту.

Клик на кнопке с маркером свернёт список, выделит маркер и откроет на нём балун. Клик на кнопке уже выделенного объекта центрирует карту по этому объекту.


Выделение объекта


Клик на маркере или клик на кнопке с маркером в списке объектов открывает балун. В балуне присутствует та же информация, что и в списке, а также кнопка прокладки маршрута к данному объекту (или от него).

Клик на кластере приведёт к изменению масштаба карты, чтобы показать маркеры, входящие в кластер.

Клик на маркере для объектов по одному адресу приведёт к появлению балуна, в котором список объектов расположен с левой стороны. При большом количестве объектов появится прокрутка.

Клик на любом пункте из этого списка сменит информацию в основной части балуна на соответствующую выделенному объекту.


Полноэкранный режим


Поскольку область, в которой формируется слой модуля, может быть узкой, введён полноэкранный режим. Для этого слева от управления масштабом расположена соответствующая кнопка. Все элементы прокрутки пересчитываются при смене режима.

При переходе в полноэкранный режим появляется плашка с надписью. Текст либо задаётся в параметре при инициализации карты, либо используется заголовок документа. Длинная надпись обрезается с простановкой троеточия в конце.

Клик на кнопке закрытия режима вернёт слой модуля в обычное состояние.

Переход в полноэкранный режим может управляться как кнопкой, так и параметром инициализации [overlayType] и параметром адресной строки. Отличие между двумя последними в том, что параметр в адресной строке появляется и исчезает автоматически при смене режима, а параметр инициализации принудительно переводит модуль в полноэкранный режим при открытии страницы независимо от адресной строки.

Для обеспечения перехода в полноэкранный режим нужно соблюсти некоторые требования, описанные в разделе «Особенность полноэкранного режима», а для стандартного режима они важны вдвойне.

Режим «плавающих панелей»


Интерфейс был сделан для другого проекта, но нам он показался привлекательным, и мы внедрили его в основной модуль. Он предполагает использование только полноэкранного режима.

При включении этого режима контейнер карты автоматически переносится в конец дочерних элементов элемента BODY для предотвращения конфликта


Особенности режима

Вызов карты

Если показ слоя модуля не выбран либо с помощью инициализации, либо с помощью параметра адресной строки, то он по умолчанию не виден. Слой можно вызвать либо кликом на любом элементе страницы, в котором указаны соответствующие параметры (подробнее в разделе «Управление режимами модуля и состоянием карты»), либо вызовом метода [toggleOverlayMode] (подробнее в разделе «API модуля»).

Такое поведение реализовано с целью использования модуля в качестве дополнения к любому проекту, где на странице с данными нужно показать их на карте, но основная смысловая нагрузка сосредоточена в контентной части.


Использование панели с подкатегориями

Мы столкнулись с данными, которые предполагают многочисленные подкатегории. Использование принципа вложенных категорий с разворачивающимся списком привело бы к необходимости постоянной прокрутки для поиска и выбора вложенных категорий, и даже полноэкранный режим не спасает ситуацию. Поэтому в этом режиме вложенные категории выводятся в свою панель.
Автоматическое изменение интерфейса под данные

Может случиться, что данные, переданные модулю либо в процессе его инициализации, либо методу [update], будут иметь разного уровня вложения.

Если будут отсутствовать вложения категорий, то визуально будут отображаться только панель этих категорий и объектов.

Если же какие-то категории будут вложены, а какие-то нет, для тех, что не имеют родительской категории, будет сформирована своя категория с названием, управляемым в параметре инициализации [interfaceText.groupCategoryName].

Если никаких категорий не передано, либо у всех объектов не указана такая привязка, будет использоваться только панель объектов.


Статичный балун

Информация об объекте может содержать любой объём данных. Поэтому балун реализован не привязанным к маркеру, а реализован в виде своей панели. Содержание балуна может управляться с помощью специального метода [createItemContent], который можно заменить на свой собственный. Подробнее об этом написано в разделе «API модуля».

Старт


Стартовый вид может быть 3-х различных видов, и зависит от данных, переданных в карту и параметра инициализации [noCats].
Вложенные категории

Если в модуль при инициализации переданы категории с вложениями, откроется слой с панелью категорий.

Поскольку режим предполагает использование 2-х уровней вложения, категории, находящиеся глубже, будут вынесены во второй уровень (подкатегории), а их родители будут размещены в панели категорий. Для категорий, не имеющих вложения, будет сформирована категория с названием, управляемым параметром [interfaceText. groupCategoryName].

При клике на категорию откроется панель подкатегорий, вложенных в неё. Клики на других категориях будут вызывать появлений соответствующих подкатегорий во второй панели.

Вторую панель можно в любой момент сдвинуть влево с помощью кнопки, расположенной справа от неё. Вернуть полный вид можно всегда с помощью той же кнопки

При клике на подкатегорию откроется панель объектов этой категории. Если объекты не переданы в модуль любым способом, они будут загружены и показаны.

Если в панели объектов уже присутствуют другие, новые будут добавлены в порядке следования категорий.

Маркеры объектов добавляются на карту и происходит перекластеризация.

Сразу же после клика панели уходят влево, освобождая место для карты.

Для выделения объектов нескольких подкатегорий придётся каждый раз нажимать на кнопку, сдвигая панель объектов.

При клике на маркер или объект открывается панель с информацией об объекте. Объект выделяется в списке, а если клик произошел по элементу списка, карта центрируется по маркеру этого объекта.

Информация в панели может быть сформирована собственными силами с помощью переопределения метода [createItemContent] (подробнее в разделе «API модуля»).

При клике на маркер, обозначающий несколько объектов по одному адресу, в информационной панели появится плашка с указанием количества объектов. При клике на неё разворачивается список со списком объектов. Клик на элементе этого списка сворачивает список и показывает информацию о выбранном объекте. Действие равнозначно клику на элемент в панели объектов.

Закрытие информационной панели снимает выделение с объекта в списке. При повторном клике на маркер панель закрывается, снимается выделение с объекта.

При закрытии панели подкатегорий панель объектов скрывается, маркеры на карте убираются. Если какой-то из них был активен, закрывается информационная панель.


Вложений категорий нет

Если вложений категорий нет, то сразу откроется панель подкатегорий.

Надпись в плашке панели подкатегорий заменяется на используемую для панели категорий.

При клике на категорию появляется панель объектов, маркеры объектов показываются на карте, происходит их перекластеризация.

Тут же после клика панель объектов уезжает влево, освобождая место для карты.

Действия, связанные с выделением объекта аналогичны описанным выше для случая вложенных категорий.

Категорий нет

Если категории при инициализации модуля не указаны, либо в объектах нет привязки к категориям, либо указан параметр [noCats], сразу откроется панель объектов.

Все действия, связанные с выделением объектов, описаны выше для вложенных категорий.


Необязательные параметры


Некоторые параметры могут быть использованы только в стандартном режиме, а часть параметров — в режиме панелей. В этих случаях использование будет оговорено.

В стандартном режиме область, выделенная под карту, подстраивается под ширину области, в которой находится базовый элемент, но высоту контейнера нужно задавать. Расположение элементов в правой панели (описание элементов) зависит от ширины области.

title *


Формирование заголовка в верхней части модуля в полноэкранном режиме.

Тип

По умолчанию

Что означает

String



Заголовок модуля

Если параметр не передан, используется заголовок документа document.title. В любой момент заголовок может быть изменён с помощью метода [setTitle], описанного в разделе «API модуля».

height *


Высота контейнера модуля. Используется в стандартном режиме.

Тип

По умолчанию

Единицы измерения

Что означает

Number

550

пиксели

Высота области с картой

Значения рассчитываются, исходя из стиля оформления списка категорий. В текущем базовом оформлении формула 550 ± 35×n.

Высота и расположение панелей категорий и объектов будут рассчитаны автоматически.

narrowWidth *


Граница для изменения вида панели объектов. Используется в стандартном режиме.

Тип

По умолчанию

Единицы измерения

Что означает

Number

1000

пиксели

Ширина области модуля для изменения вида панели объектов

При ширине, меньшей чем установленная, расположение элементов в правой части меняется — телефоны встраиваются в общий блок.

extraNarrowWidth *


Дополнительная граница для изменения вида панели объектов. Используется в стандартном режиме.

Тип

По умолчанию

Единицы измерения

Что означает

Number

800

пиксели

Ширина области модуля для изменения вида панели объектов

При ширине, меньшей чем установленная, расположение элементов в правой части меняется — все части описания объекта, включая телефоны и ссылку на сайт, выстраиваются друг под другом.

replaceRules *


Тип

По умолчанию

Что означает

Boolean

true

Заменять или нет полосы прокрутки в панелях категорий и описания объектов

Используется только в версии для стационарных устройств. На планшетах (с типом подключения desktop) полоса прокрутки не заменяется.

noCatIcons *


Тип

По умолчанию

Что означает

Boolen



Не использовать в списках иконки категорий

Пространство, отведённое под логотипы категорий, убирается, и в списке категорий, и в списке объектов в стандартном режиме. При этом для маркеров используется значения отступов, описанные в параметре [cats].

overlayType *


Тип

Возможные значения

Что означает

String

show

slide

Открывать карту в полноэкранном режиме

Использовать режим плавающих панелей

Оба значения могут быть указаны одновременно через пробел. Значение slide включает использование режима плавающих панелей, а значение show развернёт карту в полноэкранный режим в обоих режимах.

Работа с показом карты на весь viewport с помощью других методов описывается в разделе «Использование модуля» / «Управление полноэкранным режимом».


noCats *


Принудительно включает использование только панели объектов.

Тип

По умолчанию

Что означает

Boolean



Игнорирование списка категорий и построение на его месте плоского списка объектов

Параметры категорий используются для формирования маркера объектов. Для объектов с привязкой к неуказанным категориям используется так называемый «универсальный» маркер, который находится на первом месте в спрайте.

Если нужно построить список объектов с одинаковым маркером, следует прочесть о применении параметра [universalMarker] в разделе «Уникальные параметры».

В любой момент можно изменить использование панелей категорий и объектов, а также подкатегорий для режима панелей с помощью соответствующих методов модуля [setCatsMode] и [setSubCatsMode]. Вернуться к начальному отображению можно с помощью метода [setNoCatsMode]. Методы описаны в разделе «API модуля».

noPanels *


Отключение показа всех панелей — на карте остаются лишь маркеры.

Тип

По умолчанию

Что означает

Boolean



Скрытие всех панелей

В текущей версии этот параметр можно установить лишь вручную.

Режим может быть удобен для вывода информации об объекте и категориях вне модуля карты. При использовании режима управление модулем доступно лишь с помощью методов, описанных в разделе «API модуля». Ограниченное управление — клик на сторонних элементах с соответствующими атрибутами, описанных в разделе «Использование модуля» / «Управление режимами модуля и состоянием карты».

Для включения и отключения режима может быть использован метод [setNoPanelsMode], описанный в разделе «API модуля».

animationTime *


Время анимации при передвижении панелей.

Тип

Единицы измерения

По умолчанию

Что означает

Number

миллисекунды

200

Время плавного движения

Без особой на то необходимости лучше не менять.

itemCustomView *


Перечисление в балуне полной информации об объекте. Используется только в режиме панелей (статичный балун).

Тип

По умолчанию

Что означает

Boolen

false

Использовать нестандартный вывод информации объекта

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

Включив полный вывод информации, управлять порядком вывода полей и их составом доступно с помощью параметра [fields] для категорий, используя порядок перечисления и поле [hidden]. Более подробно описано в разделе «Использование модуля» / «Использование уникальной структуры».

Другой способ построения информации в любом формате заключается в переопределении метода модуля [createItemContent], который описан в разделе «API модуля».

filter *


Фильтрация объектов.

Тип

По умолчанию

Что означает

String



Перечень параметров фильтрации объектов

В текущей версии параметр можно задать лишь вручную. Другой способ использовать фильтрацию непосредственно при загрузке — использовать параметр [query], который описан в разделе «Уникальные параметры» / «Необязательные параметры».

В отличие от передачи фильтра в адресной строке или в параметре [query], значение этого параметра не требует включения квадратных скобок.

$GeoMapp.init({

...


filter: 'name*=филиал|description!*=доставка',

...


});

Режим применения к параметрам фильтра в адресной строке — добавление. Подробнее про фильтр и режим применения — в разделе «Использование модуля» / «Фильтрация объектов».


Как это выглядит в коде


$GeoMapp.init({

device: {

desktop: 'desktop_map.js'

},

pageType: 'objects',

defaultPath: {

libs: '/bitrix/components/map/lib/',

images: '/bitrix/components/map/desktop/images/'

},

ajax: '/temp/ajax/',

mapBounds: {

lat: [54.88529, 55.06124],

lng: [73.17096, 73.51429]

},

mapType: 'google',

routeType: {

google: ['walking', 'driving', 'transit']

},

narrowWidth: 800,

overlayType: 'slide show',

noCatIcons: true,

itemCustomView: true,

filter: 'name*=филиал|description!*=круглосуточно',

query: 'cat=s1,s4',

fields: {

standard: {

name: {

name: 'name',

title: 'Название объекта'

},

description: {

name: 'description',

title: 'Описание объекта'

},

address: {

name: 'address',

title: 'Адрес'

},

photo: {

name: 'photo',

title: 'Фотография'

},

url: {

name: 'url',

title: 'Ссылка на карточку объекта'

},

phone: {

name: 'phone',

title: 'Телефоны'

},

link: {

name: 'link',

title: 'Адрес сайта'

},

opening: {

name: 'opening',

title: 'Часы работы'

},

lat: {

name: 'lat',

title: 'Широта'

},

lng: {

name: 'lng',

title: 'Долгота'

}

}

},

cats: {

s101: {name: 'Медицинские учреждения'},

s1: {name: 'АЗС', pos: 30, count: 6},

s2: {name: 'Аптеки', pos: 60, cat: 's101', count: 3},

s3: {name: 'Аэропорты', pos: 90, count: 1}

},

items: {

s101: {name: 'Медицинские учреждения'},

s1: {name: 'АЗС', pos: 30, count: 6},

s2: {name: 'Аптеки', pos: 60, cat: 's101', count: 3},

s3: {name: 'Аэропорты', pos: 90, count: 1}

}

});



Поделитесь с Вашими друзьями:
1   2   3   4   5   6   7   8   9   10   11


База данных защищена авторским правом ©nethash.ru 2019
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал