relgl.Marker — DOM-маркер, прикрепляемый к карте по координатам. relgl.Popup — всплывающий блок, привязываемый к координатам или маркеру.
| Параметр |
Тип |
По умолчанию |
Описание |
element |
HTMLElement |
— |
Кастомный DOM-элемент. По умолчанию используется голубой svg-маркер |
anchor |
string |
'center' |
Позиция иконки относительно координат: 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' |
offset |
PointLike |
— |
Смещение в пикселях относительно центра элемента |
color |
string |
'#3FB1CE' |
Цвет маркера по умолчанию (если element не задан) |
scale |
number |
1 |
Масштаб маркера (по умолчанию высота 41px, ширина 27px) |
draggable |
boolean |
false |
Если true, маркер можно перетаскивать |
clickTolerance |
number |
0 |
Максимальное смещение курсора при клике, при котором клик считается допустимым |
rotation |
number |
0 |
Угол поворота маркера в градусах по часовой стрелке |
pitchAlignment |
string |
'auto' |
Выравнивание маркера по плоскости: 'map', 'viewport', 'auto' |
rotationAlignment |
string |
'auto' |
Выравнивание поворота: 'map', 'viewport', 'auto' |
| Метод |
Описание |
addTo(map) |
Прикрепляет маркер к карте |
remove() |
Удаляет маркер с карты |
getLngLat() |
Возвращает координаты маркера |
setLngLat(lnglat) |
Устанавливает координаты маркера |
getElement() |
Возвращает HTML-элемент маркера |
getOffset() |
Возвращает текущее смещение маркера |
setOffset(offset) |
Устанавливает смещение маркера |
setPopup(popup) |
Привязывает всплывающее окно к маркеру |
getPopup() |
Возвращает привязанный Popup |
togglePopup() |
Открывает или закрывает всплывающее окно |
setDraggable(bool) |
Включает/выключает перетаскивание |
isDraggable() |
Возвращает true, если маркер можно перетащить |
setRotation(rotation) |
Задаёт угол поворота маркера |
getRotation() |
Возвращает текущий угол поворота |
setPitchAlignment(alignment?) |
Задаёт свойство pitchAlignment |
getPitchAlignment() |
Возвращает текущее свойство pitchAlignment |
setRotationAlignment(alignment?) |
Задаёт свойство rotationAlignment |
getRotationAlignment() |
Возвращает текущее свойство rotationAlignment |
| Событие |
Описание |
dragstart |
Срабатывает при начале перетаскивания |
drag |
Срабатывает во время перетаскивания |
dragend |
Срабатывает когда перетаскивание заканчивается |
| Параметр |
Тип |
По умолчанию |
Описание |
maxWidth |
string |
'240px' |
Максимальная ширина всплывающего окна (CSS-значение) |
anchor |
string |
'bottom' |
Позиция относительно координат: 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right' |
offset |
number | PointLike | object |
— |
Смещение от местоположения. Объект с ключами-якорями для разных позиций |
className |
string |
— |
CSS-класс для контейнера |
closeOnMove |
boolean |
false |
Закрывать окно при перемещении карты |
closeOnClick |
boolean |
true |
Закрывать окно при клике на карту |
closeButton |
boolean |
true |
Показывать кнопку закрытия |
focusAfterOpen |
boolean |
true |
Устанавливать фокус на первый интерактивный элемент внутри окна |
| Метод |
Описание |
addTo(map) |
Добавляет всплывающее окно на карту |
remove() |
Удаляет окно с карты |
isOpen() |
Возвращает true, если окно открыто |
setLngLat(lnglat) |
Устанавливает координаты окна |
getLngLat() |
Возвращает координаты окна |
setHTML(html) |
Задаёт HTML-содержимое окна |
setText(text) |
Задаёт текстовое содержимое окна |
setMaxWidth(width) |
Устанавливает максимальную ширину |
addClassName(className) |
Добавляет CSS-класс контейнеру |
removeClassName(className) |
Удаляет CSS-класс |
toggleClassName(className) |
Переключает CSS-класс |
// Стандартный маркер
var marker = new relgl.Marker()
.setLngLat([37.6165, 55.7505])
.addTo(map);
// Маркер с цветом и возможностью перетаскивания
var marker = new relgl.Marker({ color: '#FF0000', draggable: true })
.setLngLat([37.6165, 55.7505])
.addTo(map);
// Маркер с привязанным попапом
var marker = new relgl.Marker()
.setLngLat([37.6165, 55.7505])
.setPopup(new relgl.Popup().setHTML('<h3>Москва</h3><p>Столица России</p>'))
.addTo(map);
// Обработка перетаскивания маркера
marker.on('dragend', function() {
var lnglat = marker.getLngLat();
console.log('Новые координаты:', lnglat.lng, lnglat.lat);
});
// Всплывающее окно без маркера
var popup = new relgl.Popup({ closeOnClick: false })
.setLngLat([37.6165, 55.7505])
.setHTML('<h1>Москва</h1>')
.addTo(map);
// Всплывающее окно при клике на слой
map.on('click', 'my-layer', function(e) {
new relgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});