Класс Marker

Класс Marker представляет собой базовый элемент для отображения точечных объектов на карте. Он служит визуальным представлением географической координаты и является одним из наиболее часто используемых объектов при работе с интерактивными картами. Marker не только отображает позицию, но и поддерживает взаимодействие, стилизацию, анимации и привязку всплывающих элементов.

Создание маркера

Основная форма создания маркера заключается в передаче координат и, при необходимости, объекта настроек:

const marker = L.marker([51.505, -0.09]);

Координаты задаются в формате [lat, lng], где:

  • lat — широта
  • lng — долгота

Дополнительно можно передать объект опций:

const marker = L.marker([51.505, -0.09], {
  title: 'Точка интереса',
  opacity: 0.9,
  draggable: true
});

Основные опции Marker

icon

Позволяет задать пользовательскую иконку:

const customIcon = L.icon({
  iconUrl: 'marker.png',
  iconSize: [32, 32],
  iconAnchor: [16, 32]
});

const marker = L.marker([51.5, -0.09], { icon: customIcon });

draggable

Включает возможность перетаскивания:

const marker = L.marker([51.5, -0.09], {
  draggable: true
});

opacity

Определяет прозрачность маркера:

const marker = L.marker([51.5, -0.09], {
  opacity: 0.6
});

zIndexOffset

Управляет порядком наложения маркеров:

const marker = L.marker([51.5, -0.09], {
  zIndexOffset: 1000
});

riseOnHover

Поднимает маркер при наведении:

const marker = L.marker([51.5, -0.09], {
  riseOnHover: true
});

Добавление на карту

Маркер отображается только после добавления на карту:

marker.addTo(map);

или альтернативно:

map.addLayer(marker);

Работа с координатами

Получение координат

const position = marker.getLatLng();

Возвращает объект вида:

{ lat: 51.505, lng: -0.09 }

Изменение координат

marker.setLatLng([51.51, -0.1]);

Также можно передать объект:

marker.setLatLng({ lat: 51.51, lng: -0.1 });

Иконка маркера

Установка новой иконки

marker.setIcon(customIcon);

Иконка может быть изменена динамически, что используется для визуального отображения состояния объекта.

Перетаскивание маркера

Если включён draggable: true, доступен набор событий и методов.

Начало и завершение перетаскивания

marker.on('dragstart', function () {
  console.log('Начало перемещения');
});

marker.on('dragend', function () {
  const position = marker.getLatLng();
  console.log('Новая позиция:', position);
});

Программное управление перетаскиванием

marker.dragging.enable();
marker.dragging.disable();

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

marker.bindPopup('Информация о точке');

Открытие:

marker.openPopup();

Tooltip

marker.bindTooltip('Подсказка');

Tooltip отображается при наведении или всегда (в зависимости от настроек).

События Marker

Marker поддерживает широкий набор событий.

click

marker.on('click', function () {
  console.log('Маркер нажат');
});

mouseover / mouseout

marker.on('mouseover', function () {
  console.log('Наведение на маркер');
});

marker.on('mouseout', function () {
  console.log('Уход курсора');
});

move

Срабатывает при изменении позиции:

marker.on('move', function () {
  console.log('Маркер перемещён');
});

popupopen / popupclose

marker.on('popupopen', function () {
  console.log('Popup открыт');
});

marker.on('popupclose', function () {
  console.log('Popup закрыт');
});

Управление состоянием маркера

Удаление с карты

map.removeLayer(marker);

или:

marker.remove();

Проверка добавления

map.hasLayer(marker);

Прозрачность и визуальные эффекты

Изменение прозрачности динамически:

marker.setOpacity(0.5);

Это позволяет создавать эффекты активации, деактивации или фильтрации объектов.

Слои и группы маркеров

Marker часто используется совместно с группами:

const group = L.layerGroup();

group.addLayer(L.marker([51.5, -0.09]));
group.addLayer(L.marker([51.51, -0.1]));

group.addTo(map);

Это позволяет управлять множеством точек как единым объектом.

Производные типы маркеров

DivIcon Marker

Позволяет использовать HTML вместо изображения:

const divIcon = L.divIcon({
  html: '<div class="custom-marker"></div>',
  className: ''
});

const marker = L.marker([51.5, -0.09], { icon: divIcon });

Такой подход используется для сложной стилизации через CSS.

Анимация и динамическое обновление

Marker не имеет встроенной сложной анимации, но изменение координат может быть использовано для создания плавного движения:

function moveMarker(marker, newLatLng) {
  marker.setLatLng(newLatLng);
}

Для плавных эффектов часто применяется интерполяция координат с таймерами.

Производительность при большом количестве маркеров

При работе с десятками тысяч объектов Marker становится ресурсоёмким. В таких случаях применяются:

  • кластеризация
  • упрощённые иконки
  • отключение интерактивности
  • использование canvas-слоёв (через плагины)

Взаимодействие с другими слоями

Marker может сочетаться с:

  • Polyline
  • Polygon
  • Circle
  • GeoJSON слоями

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

L.polyline([
  [51.5, -0.09],
  [51.51, -0.1]
]).addTo(map);

L.marker([51.505, -0.09]).addTo(map);

Внутреннее поведение

Marker наследуется от Layer, что означает:

  • поддержка событий
  • управление через addTo/remove
  • интеграция в систему слоёв карты
  • единый жизненный цикл с другими геообъектами

Визуально Marker реализован через DOM-элемент, позиционируемый относительно контейнера карты, что обеспечивает точное соответствие географическим координатам.

Оглавление