Маркер

Создает компонент маркера

Примеры

let marker = new Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

Задать параметры

let marker = new Marker({
    color: "#FFFFFF",
    draggable: true
  }).setLngLat([30.5, 50.5])
  .addTo(map);

.maplibregl-marker-covered {
    pointer-events: none;
    cursor: default;
}

См. также

• Добавление маркера по умолчанию
• Добавление пользовательских значков с помощью маркеров
• Создание перетаскиваемого маркера
• Анимация маркера
• Привязка всплывающего окна к экземпляру маркера

События

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

Событие drag типа MarkerDragEvent будет вызвано во время перетаскивания.

Событие dragend типа MarkerDragEvent будет вызвано после завершения перетаскивания маркера.

Событие click типа MarkerClickEvent будет вызвано при нажатии на маркер.

Классы CSS

Класс CSS maplibregl-marker-covered включается для элемента маркера, когда маркер скрыт за трехмерным рельефом или находится на обратной стороне глобуса. Используйте этот класс, чтобы применить пользовательские стили к скрытым маркерам.

Наследует

• Evented<MarkerEventType>

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

Конструктор

new Marker(options?: MarkerOptions): Marker

Параметры

Возвращаемое значение

Marker

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

Evented<MarkerEventType>.constructor

Методы

_onKeyDown()

_onKeyDown(e: KeyboardEvent): void

Перемещает сфокусированный перетаскиваемый маркер по умолчанию с помощью клавиш со стрелками (на 1 экранный пиксель при нажатии клавиши; на 10 — при нажатии Shift). Повторяет жест перетаскивания указателем: положение обновляется до вызова dragstart при первом перемещении, при каждом перемещении вызывается drag, а при отпускании клавиши со стрелкой (или потере фокуса) вызывается dragend. Удерживание клавиши приводит к повторным событиям drag в рамках одного жеста.

Параметры

Возвращаемое значение

void

_updateAccessibilityRole()

_updateAccessibilityRole(): void

Поддерживает соответствие роли маркера по умолчанию его интерактивности. Маркерам по умолчанию необходима роль, поскольку в Marker.addTo задается aria-label. Для неинтерактивных маркеров используется role=img; для интерактивных (перетаскиваемых или имеющих всплывающее окно) — role=button. Обработчики нажатия принадлежат приложению и не изменяют роль автоматически. Пользовательские элементы маркеров не затрагиваются, поскольку дерево специальных возможностей для них задается приложением. Роли, явно заданные приложением, сохраняются.

Возвращаемое значение

void

_updateTabIndex()

_updateTabIndex(): void

Сохраняет возможность перевода фокуса на элемент маркера, пока для него доступно встроенное управление с клавиатуры. Всплывающее окно делает интерактивным любой элемент маркера; перетаскивание управляет возможностью перевода фокуса только для маркера по умолчанию, чтобы пользовательские элементы оставались под управлением приложения (#7790). Заданный приложением tabindex здесь никогда не добавляется, не изменяется и не удаляется.

Возвращаемое значение

void

addClassName()

addClassName(className: string): void

Добавляет класс CSS элементу маркера.

Параметры

Возвращаемое значение

void

Пример

let marker = new Marker()
marker.addClassName('some-class')

addTo()

addTo(map: Map): this

Добавляет Marker к объекту Map.

Параметры

Возвращаемое значение

this

Пример

let marker = new Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // add the marker to the map

fire()

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

fire(event: MarkerDragEvent | MarkerClickEvent): this

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

Параметры

Возвращаемое значение

this

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

Evented.fire

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

fire(type: keyof MarkerEventType, 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-элемент маркера Marker.

Возвращает

HTMLElement

элемент

getLngLat()

getLngLat(): LngLat

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

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

Возвращает

LngLat

LngLat, описывающий местоположение маркера.

Пример

// Store the marker's longitude and latitude coordinates in a variable
let lngLat = marker.getLngLat();
// Print the marker's longitude and latitude values in the console
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )

См. также

Создание перетаскиваемого маркера

getOffset()

getOffset(): Point

Возвращает смещение маркера.

Возвращает

Point

Экранные координаты маркера в пикселях.

getPitchAlignment()

getPitchAlignment(): Alignment

Возвращает текущее свойство pitchAlignment маркера.

Возвращает

Alignment

Текущее выравнивание маркера по углу наклона в градусах.

getPopup()

getPopup(): Popup

Возвращает экземпляр Popup, связанный с маркером.

Возвращает

Popup

всплывающее окно

Пример

let marker = new Marker()
 .setLngLat([0, 0])
 .setPopup(new Popup().setHTML("<h1>Hello World!</h1>"))
 .addTo(map);

console.log(marker.getPopup()); // return the popup instance

getRotation()

getRotation(): number

Возвращает текущий угол поворота маркера (в градусах).

Возвращает

number

Текущий угол поворота маркера.

getRotationAlignment()

getRotationAlignment(): Alignment

Возвращает текущее свойство rotationAlignment маркера.

Возвращает

Alignment

Текущее выравнивание маркера относительно поворота.

isDraggable()

isDraggable(): boolean

Возвращает true, если маркер можно перетаскивать

Возвращает

boolean

True, если маркер можно перетаскивать.

listens()

listens(type: keyof MarkerEventType): boolean

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

Параметры

Возвращает

boolean

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

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

Evented.listens

off()

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

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

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

Параметры

Возвращает

this

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

Evented.off

on()

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

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

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

Параметры

Возвращает

Subscription

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

Evented.on

once()

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

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

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

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

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

Параметры

Возвращает

Promise<MarkerEventType[T]>

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

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

Evented.once

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

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

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

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

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

Параметры

Возвращает

this

this, если передан обработчик

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

Evented.once

remove()

remove(): this

Удаляет маркер с карты

Возвращает

this

Пример

let marker = new Marker().addTo(map);
marker.remove();

removeClassName()

removeClassName(className: string): void

Удаляет CSS-класс из элемента маркера.

Параметры

Возвращает

void

Пример

let marker = new Marker()
marker.removeClassName('some-class')

setDraggable()

setDraggable(shouldBeDraggable?: boolean): this

Устанавливает свойство draggable и соответствующее поведение маркера. Маркер по умолчанию, который можно перетаскивать, также доступен для фокусировки с клавиатуры и перемещения клавишами со стрелками (см. MarkerOptions.draggable); фокусируемость и поведение пользовательских элементов маркера при управлении с клавиатуры определяются приложением.

Параметры

Возвращает

this

setEventedParent()

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

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

Параметры

Возвращает

this

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

Evented.setEventedParent

setLngLat()

setLngLat(lnglat: LngLatLike): this

Задаёт географическое положение маркера и перемещает его.

Параметры

Возвращает

this

Пример

Создайте новый маркер, задайте долготу и широту и добавьте его на карту

new Marker()
  .setLngLat([-65.017, -16.457])
  .addTo(map);

См. также

• Добавление пользовательских значков с помощью маркеров
• Создание перетаскиваемого маркера

setOffset()

setOffset(offset: PointLike): this

Задаёт смещение маркера

Параметры

Возвращает

this

setOpacity()

setOpacity(opacity?: string | number, opacityWhenCovered?: string | number): this

Задаёт свойства opacity и opacityWhenCovered маркера. При вызове без аргументов значения прозрачности и opacityWhenCovered сбрасываются до значений по умолчанию

Параметры

Возвращает

this

setPitchAlignment()

setPitchAlignment(alignment?: Alignment): this

Задаёт свойство pitchAlignment маркера.

Параметры

Возвращает

this

setPopup()

setPopup(popup?: Popup): this

Привязывает всплывающее окно к маркеру.

Параметры

Возвращает

this

Пример

let marker = new Marker()
 .setLngLat([0, 0])
 .setPopup(new Popup().setHTML("<h1>Hello World!</h1>")) // add popup
 .addTo(map);

См. также

Привязка всплывающего окна к экземпляру маркера

setRotation()

setRotation(rotation?: number): this

Задаёт свойство rotation маркера.

Параметры

Возвращает

this

setRotationAlignment()

setRotationAlignment(alignment?: Alignment): this

Задаёт свойство rotationAlignment маркера.

Параметры

Возвращает

this

setSubpixelPositioning()

setSubpixelPositioning(value: boolean): this

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

Параметры

Возвращает

this

Пример

let marker = new Marker()
marker.setSubpixelPositioning(true);

toggleClassName()

toggleClassName(className: string): boolean

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

Параметры

Возвращает

boolean

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

Пример

let marker = new Marker()
marker.toggleClassName('toggleClass')

togglePopup()

togglePopup(): this

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

Возвращаемое значение

this

Пример

let marker = new Marker()
 .setLngLat([0, 0])
 .setPopup(new Popup().setHTML("<h1>Hello World!</h1>"))
 .addTo(map);

marker.togglePopup(); // toggle popup open or closed