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