Popup

Компонент всплывающего окна.

Примеры

Создание всплывающего окна

let popup = new Popup();
// Set an event listener that will fire
// any time the popup is opened
popup.on('open', () => {
  console.log('popup was opened');
});

Создание всплывающего окна

let popup = new Popup();
// Set an event listener that will fire
// any time the popup is closed
popup.on('close', () => {
  console.log('popup was closed');
});

let markerHeight = 50, markerRadius = 10, linearOffset = 25;
let popupOffsets = {
 'top': [0, 0],
 'top-left': [0,0],
 'top-right': [0,0],
 'bottom': [0, -markerHeight],
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
 };
let popup = new Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

См. также

• Отображение всплывающего окна
• Отображение всплывающего окна при наведении курсора
• Отображение всплывающего окна при нажатии
• Привязка всплывающего окна к экземпляру маркера
• Отображение информации о полигоне при нажатии

События

Событие open типа PopupEvent вызывается, когда всплывающее окно открывается вручную или программно.

Событие close типа PopupEvent вызывается, когда всплывающее окно закрывается вручную или программно.

Наследует

• Evented<PopupEventType>

Конструкторы

Конструктор

new Popup(options?: PopupOptions): Popup

Параметры

Возвращает

Popup

Переопределяет

Evented<PopupEventType>.constructor

Методы

_updateOpacity()

_updateOpacity(): void

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

Возвращает

void

addClassName()

addClassName(className: string): this

Добавляет CSS-класс элементу-контейнеру всплывающего окна.

Параметры

Возвращает

this

Пример

let popup = new Popup()
popup.addClassName('some-class')

addTo()

addTo(map: Map): this

Добавляет всплывающее окно на карту.

Параметры

Возвращает

this

Пример

new Popup()
  .setLngLat([0, 0])
  .setHTML("<h1>Null Island</h1>")
  .addTo(map);

См. также

• Отображение всплывающего окна
• Отображение всплывающего окна при наведении курсора
• Отображение всплывающего окна при нажатии
• Отображение информации о полигоне при нажатии

fire()

Сигнатура вызова

fire(event: PopupEvent): this

Вызывает все обработчики, зарегистрированные для данного типа события.

Параметры

Возвращает

this

Унаследовано от

Evented.fire

Сигнатура вызова

fire(type: keyof PopupEventType, properties?: object): this

Совместимость с сигнатурой предыдущих версий (type: string, properties: Object). См. https://github.com/mapbox/mapbox-gl-js/issues/6522, https://github.com/mapbox/mapbox-gl-draw/issues/766

Параметры

Возвращает

this

Унаследовано от

Evented.fire

getElement()

getElement(): HTMLElement

Возвращает HTML-элемент Popup.

Возвращает

HTMLElement

элемент

Пример

Изменение размера шрифта элемента Popup

let popup = new Popup()
  .setLngLat([-96, 37.8])
  .setHTML("<p>Hello World!</p>")
  .addTo(map);
let popupElem = popup.getElement();
popupElem.style.fontSize = "25px";

getLngLat()

getLngLat(): LngLat

Возвращает географическое местоположение якоря всплывающего окна.

Долгота в результате может отличаться от долготы, ранее заданной с помощью setLngLat, на величину, кратную 360 градусам, поскольку Popup переносит долготу якоря между копиями мира, чтобы всплывающее окно оставалось на экране.

Возвращает

LngLat

Географическое местоположение якоря всплывающего окна.

getMaxWidth()

getMaxWidth(): string

Возвращает максимальную ширину всплывающего окна.

Возвращает

string

Максимальная ширина всплывающего окна.

isOpen()

isOpen(): boolean

Возвращает

boolean

true, если всплывающее окно открыто, false, если оно закрыто.

listens()

listens(type: keyof PopupEventType): boolean

Возвращает true, если у этого экземпляра Evented или любого перенаправленного экземпляра Evented есть обработчик указанного типа.

Параметры

Возвращает

boolean

true, если для указанного типа события зарегистрирован хотя бы один обработчик, иначе — false

Унаследовано от

Evented.listens

off()

off<T extends keyof PopupEventType>(type: T, listener: (event: PopupEventType[T]) => void): this

Удаляет ранее зарегистрированный обработчик события.

Параметры типа

Параметры

Возвращает

this

Унаследовано от

Evented.off

on()

on<T extends keyof PopupEventType>(type: T, listener: (event: PopupEventType[T]) => void): Subscription

Добавляет обработчик для указанного типа события.

Параметры типа

Параметры

Возвращает

Subscription

Унаследовано от

Evented.on

once()

Сигнатура вызова

once<T extends keyof PopupEventType>(type: T): Promise<PopupEventType[T]>

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

Обработчик будет вызван при первом возникновении события после его регистрации.

Параметры типа

Параметры

Возвращает

Promise<PopupEventType[T]>

промис, который разрешается событием

Унаследовано от

Evented.once

Сигнатура вызова

once<T extends keyof PopupEventType>(type: T, listener: (event: PopupEventType[T]) => void): this

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

Обработчик будет вызван при первом возникновении события после его регистрации.

Параметры типа

Параметры

Возвращает

this

this, если указан обработчик

Унаследовано от

Evented.once

remove()

remove(): this

Удаляет всплывающее окно с карты, на которую оно было добавлено.

Возвращает

this

Пример

let popup = new Popup().addTo(map);
popup.remove();

removeClassName()

removeClassName(className: string): this

Удаляет CSS-класс из элемента-контейнера всплывающего окна.

Параметры

Возвращает

this

Пример

let popup = new Popup()
popup.removeClassName('some-class')

setDOMContent()

setDOMContent(htmlNode: Node): this

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

Параметры

Возвращает

this

Пример

Создайте элемент с содержимым всплывающего окна

let div = document.createElement('div');
div.innerHTML = 'Hello, world!';
let popup = new Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

setEventedParent()

setEventedParent(parent?: Evented<EventTypeMap>, data?: EventedParentData | (() => EventedParentData)): this

Передает все события, вызванные этим экземпляром Evented, родительскому экземпляру Evented.

Параметры

Возвращает

this

Унаследовано от

Evented.setEventedParent

setHTML()

setHTML(html: string): this

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

Этот метод не выполняет фильтрацию или очистку HTML и должен использоваться только с доверенным содержимым. Если содержимое представляет собой недоверенную текстовую строку, рассмотрите возможность использования Popup.setText.

Параметры

Возвращает

this

Пример

let popup = new Popup()
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .addTo(map);

См. также

• Отображение всплывающего окна
• Отображение всплывающего окна при наведении курсора
• Отображение всплывающего окна при нажатии
• Привязка всплывающего окна к экземпляру маркера

setLngLat()

setLngLat(lnglat: LngLatLike): this

Задает географическое положение привязки всплывающего окна и перемещает окно в это место. Заменяет поведение trackPointer().

Параметры

Возвращает

this

setMaxWidth()

setMaxWidth(maxWidth: string): this

Задает максимальную ширину всплывающего окна. Это устанавливает свойство CSS max-width. Доступные значения можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Параметры

Возвращает

this

setOffset()

setOffset(offset?: Offset): this

Задает смещение всплывающего окна.

Параметры

Возвращает

this

setPadding()

setPadding(padding?: PaddingOptions): void

Задает ограничения на отступы всплывающего окна при позиционировании.

Параметры

Возвращает

void

Пример

popup.setPadding({ top: 10, right: 20, bottom: 30, left: 40 });

setSubpixelPositioning()

setSubpixelPositioning(value: boolean): void

Передайте логическое значение, чтобы разрешить субпиксельное позиционирование всплывающего окна

Параметры

Возвращает

void

Пример

let popup = new Popup()
popup.setSubpixelPositioning(true);

setText()

setText(text: string): this

Задаёт содержимое всплывающего окна в виде текстовой строки.

Эта функция создаёт в DOM узел Text, поэтому не может вставлять необработанный HTML. Используйте этот метод для защиты от XSS, если содержимое всплывающего окна предоставлено пользователем.

Параметры

Возвращает

this

Пример

let popup = new Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);

toggleClassName()

toggleClassName(className: string): boolean

Добавляет или удаляет указанный CSS-класс у контейнера всплывающего окна в зависимости от того, есть ли этот класс у контейнера в данный момент.

Параметры

Возвращает

boolean

возвращает false, если класс был удалён, true, если класс был добавлен, и undefined, если контейнера нет

Пример

let popup = new Popup()
popup.toggleClassName('toggleClass')

trackPointer()

trackPointer(): this

Привязывает всплывающее окно к позиции курсора на экранах с устройством-указателем (на сенсорных экранах оно будет скрыто). Заменяет поведение setLngLat. Для большинства сценариев использования задайте closeOnClick и closeButton значение false.

Возвращает

this

Пример

let popup = new Popup({ closeOnClick: false, closeButton: false })
  .setHTML("<h1>Hello World!</h1>")
  .trackPointer()
  .addTo(map);