HTML-маркеры в HERE Maps API for JavaScript представляют собой механизм размещения на карте произвольных DOM-элементов, которые ведут себя как географические объекты и синхронизируются с координатами карты при масштабировании и перемещении. В отличие от стандартных графических маркеров, HTML-маркеры позволяют использовать полноценную разметку, стили CSS и JavaScript-логику внутри элемента, что делает их основным инструментом для создания интерактивных интерфейсных слоёв поверх карты.
В основе работы HTML-маркеров лежит привязка DOM-узла к географической координате. Карта выполняет преобразование координат в пиксельные значения и обновляет позицию элемента при каждом изменении viewport.
В HERE Technologies этот механизм реализован через слой взаимодействия между картографическим движком и DOM-рендерингом, где каждый HTML-маркер существует как объект с геопривязкой и визуальным представлением.
Ключевые компоненты:
HTML-маркер создаётся через H.map.DomMarker. В качестве
содержимого используется DOM-элемент, который может быть сформирован
динамически.
const container = document.createElement('div');
container.className = 'custom-marker';
container.innerHTML = `
<div class="marker-content">
<span class="title">Объект</span>
</div>
`;
const domIcon = new H.map.DomIcon(container);
const marker = new H.map.DomMarker(
{ lat: 52.5, lng: 13.4 },
{ icon: domIcon }
);
map.addObject(marker);HTML-маркер отличается тем, что его визуальная структура полностью определяется разработчиком, включая вложенные элементы, стили и события.
Стилизация осуществляется через CSS, что позволяет создавать сложные визуальные компоненты: карточки, бейджи, индикаторы состояния.
.custom-marker {
position: relative;
transform: translate(-50%, -100%);
}
.marker-content {
background: white;
padding: 6px 10px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-size: 12px;
white-space: nowrap;
}Ключевой момент заключается в необходимости корректировки точки
привязки элемента. По умолчанию координата соответствует левому верхнему
углу, поэтому часто применяется transform для центрирования
относительно географической точки.
HTML-маркеры поддерживают стандартную систему DOM-событий. Это позволяет реализовывать интерактивные элементы без дополнительной обвязки картографического API.
container.addEventListener('click', () => {
console.log('Маркер нажат');
});При этом события могут конфликтовать с обработкой событий карты (панорамирование, зум), поэтому часто требуется контроль propagation.
container.addEventListener('click', (event) => {
event.stopPropagation();
});HTML-маркеры пересчитывают своё положение при каждом изменении состояния карты. Это включает:
При большом количестве DOM-маркеров производительность становится критическим фактором, так как каждый элемент участвует в layout-пересчёте браузера.
H.map.DomMarker поддерживает набор параметров, влияющих
на поведение:
const marker = new H.map.DomMarker(
{ lat: 52.5, lng: 13.4 },
{
icon: domIcon,
volatility: true
}
);Основные параметры:
icon — DOM-иконкаvolatility — включение динамического поведения при
dragminZoom / maxZoom — ограничения
видимостиzIndex — управление порядком наложенияДля точного позиционирования применяется настройка смещения. Это особенно важно для кастомных UI-элементов.
const container = document.createElement('div');
container.style.transform = 'translate(-50%, -100%)';Такое смещение позволяет закрепить нижнюю точку маркера на координате, что соответствует визуальной логике «указателя».
HTML-маркеры могут изменять содержимое без пересоздания объекта. Это важно для отображения состояния объектов в реальном времени.
container.querySelector('.title').textContent = 'Обновлённый объект';Также возможно полное обновление DOM:
marker.setIcon(new H.map.DomIcon(newContainer));HTML-маркеры часто используются как слой визуализации бизнес-логики:
При работе с потоковыми данными маркеры обновляются асинхронно, что требует оптимизации:
DOM-рендеринг является наиболее ресурсоёмким способом отображения объектов на карте. При большом количестве HTML-маркеров возникают ограничения:
Для масштабных сцен используется гибридный подход:
Порядок отображения регулируется через zIndex:
const marker = new H.map.DomMarker(
{ lat: 52.5, lng: 13.4 },
{
icon: domIcon,
zIndex: 10
}
);Это позволяет управлять перекрытием элементов в зависимости от логики интерфейса, например выделять активные объекты поверх остальных.
HTML-маркеры существуют в едином пространстве слоёв карты, но при необходимости могут быть объединены с дополнительными оверлейными системами:
При этом важно учитывать синхронизацию координат и viewport, чтобы визуальные элементы оставались согласованными с картой.
Удаление маркера выполняется через карту:
map.removeObject(marker);После удаления DOM-элементы становятся недоступными через карту, однако при сложных приложениях требуется также очистка собственных ссылок, чтобы избежать утечек памяти.
При разработке интерфейсов с большим количеством DOM-маркеров применяется стратегия адаптивной детализации:
Такой подход снижает нагрузку и повышает читаемость карты.
HTML-маркеры могут быть перетаскиваемыми при включении соответствующих опций. В этом режиме координаты обновляются в реальном времени.
marker.setData({ draggable: true });При перемещении необходимо синхронизировать новые координаты с внешними данными приложения, иначе возникает рассогласование состояния.
HTML-маркеры часто строятся на основе шаблонов, генерируемых функциями:
function createMarker(title, value) {
const el = document.createElement('div');
el.className = 'marker';
el.innerHTML = `
<strong>${title}</strong>
<div>${value}</div>
`;
return new H.map.DomIcon(el);
}Такой подход позволяет масштабировать создание маркеров и централизовать их визуальную логику.
На мобильных устройствах HTML-маркеры требуют оптимизации:
В противном случае возможно снижение FPS при взаимодействии с картой.
HTML-маркеры реагируют на события карты:
mapviewchangezoomlevelchangepointermoveЭти события используются для синхронизации внешней логики интерфейса с положением маркеров и их визуальным состоянием.