popup

Попап — это всплывающее окно, в котором можно отобразить произвольный HTML-код. Попап связан с определенным местом на карте.

DG.Popup

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

Для открытия попапа можно использовать метод карты Map.openPopup, в таком случае одновременно может быть открыт лишь один попап, либо метод Map.addLayer для отображения любого количества попапов.

Пример использования

Включить отображение попапа по клику на маркер довольно просто:

marker.bindPopup(popupContent).openPopup();

У дополнительных слоев, таких как ломаные, также есть метод bindPopup. Вот более сложный пример отображения попапа:

var popup = DG.popup()
    .setLatLng(latlng)
    .setContent('<p>Привет мир!<br />Это попап.</p>')
    .openOn(map);

Создание

Конструктор	Описание
DG.popup( <Popup options> options?, <Layer> source?)	Создает объект Popup с переданными опциями, описывающими внешний вид и расположение попапа. Также вторым параметром можно передать объект source, указывающий привязку попапа к определенному объекту типа Layer.

Опции

Опция	Тип	По умолчанию	Описание
maxWidth	Number	300	Максимальная ширина попапа в пикселях.
minWidth	Number	50	Минимальная ширина попапа в пикселях.
maxHeight	Number	null	Если значение установлено и содержимое попапа превышает заданную высоту, создается контейнер указанной высоты со скроллом.
autoPan	Boolean	true	Установите значение в false, если не хотите, чтобы карта автоматически сдвигалась для полного отображения попапа.
autoPanPaddingTopLeft	Point	null	Задает расстояние от края попапа до левого верхнего угла карты при автоматическом сдвиге.
autoPanPaddingBottomRight	Point	null	Задает расстояние от края попапа до правого нижнего угла карты при автоматическом сдвиге.
autoPanPadding	Point	Point(5, 5)	Задает расстояние от края попапа до границы карты при автоматическом сдвиге, устанавливает одинаковые значения для autoPanPaddingBottomRight и autoPanPaddingTopLeft.
keepInView	Boolean	false	Установите в true, если необходимо предотвратить вероятность перемещения попапа за пределы видимой области карты пока он открыт.
closeButton	Boolean	true	Отвечает за отображение кнопки закрытия попапа.
offset	Point	Point(0, 7)	Устанавливает отступ позиции попапа. Удобно для управления "ножкой" попапа.
autoClose	Boolean	true	Установите эту опцию в false, если хотите изменить стандартное поведение, когда попап закрывается при кликах в область карты (устанавливается глобально с помощью метода карты closePopupOnClick)
zoomAnimation	Boolean	true	Анимировать ли попап при масштабировании. Отключите, если есть проблемы с отображением Flash содержимого внутри попапа.
className	String	''	Имя CSS-класса, которое будет назначено попапу.
pane	String	'popupPane'	Панель карты, на которую будет добавлен попап.
sprawling	Boolean	false	По умолчанию, ширина попапа подстраивается под ширину его контента и под ширину карты. Выставьте значение true, если хотите, чтобы выбиралась максимальная ширина, ограниченная только шириной карты.
textDirection	string	'auto'	Направление текста контента попапа. Может принимать одно из следующих значений: 'auto', 'rtl', 'ltr'.

События

События, унаследованные от Layer

Событие	Данные	Описание
add	Event	Вызывается при добавлении нового слоя на карту.
remove	Event	Вызывается при удалении слоя с карты.

События попапа, унаследованные от Layer

Событие	Данные	Описание
popupopen	PopupEvent	Вызывается при открытии попапа.
popupclose	PopupEvent	Вызывается при закрытии попапа.

Методы

Метод	Возвращает	Описание
openOn( <Map> map)	this	Добавляет попап на карту, предварительно закрыв другие попапы. Аналогично map.openPopup(popup).
getLatLng()	LatLng	Возвращает географические координаты точки открытия попапа.
setLatLng( <LatLng> latlng)	this	Устанавливает географические координаты точки открытия попапа.
getContent()	String|HTMLElement	Возвращает содержимое основной части попапа.
setContent( <String | HTMLElement | Function> htmlContent)	this	Задает содержимое основной части попапа. Может принимать HTML строку или DOM-элемент. Если метод получает функцию, данной функции будет передан исходный слой. Функция должна возвращать String или HTMLElement
getHeaderContent()	String | HTMLElement	Возвращает содержимое секции header попапа.
setHeaderContent( <String | HTMLElement> htmlContent)	this	Задает содержимое секции header попапа. Может принимать HTML строку или DOM-элемент.
getFooterContent()	String|HTMLElement	Возвращает содержимое секции footer попапа.
setFooterContent( <String|HTMLElement> htmlContent)	this	Задает содержимое секции footer попапа. Может принимать HTML строку или DOM-элемент.
getElement()	String|HTMLElement	Алиас для getContent()
update()	null	Обновляет содержимое попапа, разметку и позиционирование. Полезно при обновлении попапа, когда внутри него что-то изменилось, например, загрузилось изображение.
isOpen()	Boolean	Возвращает true, когда попап отображается на карте.
bringToFront()	this	Помещает данный попап выше других попапов (в пределах одной панели карты)
bringToBack()	this	Помещает данный попап под другими попапами (в пределах одной панели карты)

Методы попапа, унаследованные от Layer

Методы, унаследованные от Layer

Методы, унаследованные от Evented