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

В HERE Maps JavaScript API маркер представляет собой объект H.map.Marker, который размещается на карте в заданной географической точке. В основе позиционирования лежит объект H.geo.Point, определяющий широту и долготу.

Минимальная структура создания маркера включает:

  • координаты точки (lat, lng)
  • объект маркера
  • добавление маркера на слой карты
const point = new H.geo.Point(52.5200, 13.4050);

const marker = new H.map.Marker(point);

map.addObject(marker);

Маркер по умолчанию использует стандартную иконку библиотеки HERE и автоматически привязывается к пиксельному слою карты.

Координаты и система позиционирования

Каждый маркер опирается на географическую систему координат WGS84, где:

  • latitude — широта (ось север–юг)
  • longitude — долгота (ось запад–восток)

Создание точки может выполняться через конструктор H.geo.Point или через литеральный объект координат, в зависимости от версии API.

const coordinates = new H.geo.Point(
  55.7558,
  37.6173
);

const marker = new H.map.Marker(coordinates);
map.addObject(marker);

Важно учитывать, что порядок всегда фиксирован: сначала широта, затем долгота. Перепутанные значения приводят к смещению маркера в неправильный регион.

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

Маркер не отображается до момента добавления его в объектную модель карты. Карта хранит все элементы как коллекцию объектов слоя H.map.Object.

map.addObject(marker);

После добавления:

  • объект становится частью визуального слоя
  • автоматически участвует в перерисовке при масштабировании и перемещении
  • поддерживает интерактивность (если включена обработка событий)

Удаление маркера выполняется аналогично:

map.removeObject(marker);

Создание нескольких маркеров

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

const locations = [
  { lat: 48.8566, lng: 2.3522 },
  { lat: 51.5074, lng: -0.1278 },
  { lat: 40.7128, lng: -74.0060 }
];

const markers = [];

locations.forEach((loc) => {
  const point = new H.geo.Point(loc.lat, loc.lng);
  const marker = new H.map.Marker(point);

  map.addObject(marker);
  markers.push(marker);
});

Такой подход позволяет централизованно управлять группой маркеров: удалять, обновлять или фильтровать их.

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

Маркер автоматически реагирует на изменения состояния карты:

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

Внутренне HERE Maps использует проекцию Web Mercator, что обеспечивает стабильное позиционирование объектов на глобальной карте.

Простая кастомизация через иконку

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

const icon = new H.map.Icon('marker.png');

const marker = new H.map.Marker(point, {
  icon: icon
});

map.addObject(marker);

Изменение иконки не влияет на координатную модель — маркер остаётся привязанным к H.geo.Point.

Работа с объектами маркеров как с коллекцией

При большом количестве маркеров удобно рассматривать их как набор объектов, поддерживающий операции добавления и удаления.

function clearMarkers(markersArray, mapInstance) {
  markersArray.forEach((m) => {
    mapInstance.removeObject(m);
  });

  markersArray.length = 0;
}

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

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

Маркер не требует ручного пересчёта координат. При каждом изменении состояния карты происходит автоматическое обновление отображения:

  • при zoom-in увеличивается визуальный размер сцены, но координата остаётся неизменной
  • при zoom-out маркер уменьшается пропорционально карте
  • при смене центра пересчитывается позиция на экране

Это достигается за счёт привязки к географическим координатам, а не к пиксельной сетке.

Типовые ошибки при создании маркеров

Часто встречающиеся проблемы связаны с неправильной инициализацией:

  • передача координат в виде строки вместо чисел
  • перепутанный порядок широты и долготы
  • добавление маркера до инициализации карты
  • отсутствие вызова map.addObject

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

const point = new H.geo.Point("52.5", "13.4"); // строки вместо чисел

Корректная форма:

const point = new H.geo.Point(52.5, 13.4);

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

Маркер можно не пересоздавать при изменении координат. Вместо этого применяется обновление геометрии:

marker.setGeometry(new H.geo.Point(59.9311, 30.3609));

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

Согласованность отображения и данных

Каждый маркер представляет собой связку между визуальным объектом и географической сущностью. При проектировании логики важно поддерживать соответствие между:

  • источником данных (API, база, массив)
  • объектом H.map.Marker
  • состоянием карты

Такой подход обеспечивает предсказуемость поведения при масштабировании, фильтрации и обновлении данных на карте.

Оглавление