Метка

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

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

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

Чтобы добавить метку на карту необходимо передать в конструктор класса YMaps.Placemark координаты точки ее привязки и список параметров, а затем с помощью метода карты addOverlay() добавить метку на карту.

// Создает метку в центре Москвы
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.609218,55.753559));

// Устанавливает содержимое балуна
placemark.name = "Москва";
placemark.description = "Столица Российской Федерации";

// Добавляет метку на карту
map.addOverlay(placemark); 

Когда метка открывает балун, ее значок скрывается. Для того, чтобы значок метки оставался на карте, установите опцию hideIcon в значение false:

/ Создает метку, значок которой не скрывается при открытии балуна
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.609218,55.753559), {hideIcon: false});

// Добавляет метку на карту
map.addOverlay(placemark);

Значок метки

В значке метки может размещаться любое HTML-содержимое. Стандартные значки меток растягиваются по ширине и высоте, в зависимости от длины текста.

Чтобы изменить содержимое значка метки используйте метод setIconContent(), а чтобы получить содержимое - метод getIconContent().

placemark.setIconContent("Щелкни меня");

Чтобы очистить содержимое значка метки вызовите метод setIconContent(), передав ему на вход null:

placemark.setIconContent(null);

Открыть пример в новом окне

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

При перетаскивании метка последовательно генерирует три события: DragStart, Drag и DragEnd.

Чтобы разрешить перетаскивание метки установите опцию draggable в значение true.

Пример ниже демонстрирует как прослушивать и обрабатывать события при перетаскивании метки:

  1. В начале перетаскивания сохраняются координаты точки старта.
  2. В процессе перетаскивания в значок метки выводится значение "пробега" метки.
  3. По окончании перетаскивания содержимое значка очищается и метка открывает балун с "пройденным" расстоянием.
// Создает и добавляет метку на карту
var placemark = new YMaps.Placemark(map.getCenter(), {draggable: true});
map.addOverlay(placemark);

// Обнуляет переменные, содержащие общее расстояние, пройденное меткой и предыдущую точку пути
var distance = 0, prev;

// Прикрепляет обработчики событий метки
YMaps.Events.observe(placemark, placemark.Events.DragStart, function (obj) {
    prev = obj.getGeoPoint().copy();
});

YMaps.Events.observe(placemark, placemark.Events.Drag, function (obj) {
    var current = obj.getGeoPoint().copy();

    // Расчитывает общее расстояние, пройденное меткой при перетаскивании (в метрах)
    distance += current.distance(prev);
    prev = current;

    obj.setIconContent("Пробег: " + YMaps.humanDistance(distance));
});

YMaps.Events.observe(placemark, placemark.Events.DragEnd, function (obj) {
    // Устанавливает содержимое балуна
    placemark.name = "Результат";
    placemark.description = "Вы проехали: " + YMaps.humanDistance(distance);
    placemark.openBalloon();

    // Стирает содержимое метки и обнуляет расстояние
    obj.setIconContent(null);
    distance = 0;

    obj.update();
});

Открыть пример в новом окне

Задание стиля метки

В API предусмотрен ряд встроенных стилей для значков меток:

default#lightbluePoint default#lightblueSmallPoint
default#bluePoint default#blueSmallPoint
default#darkbluePoint default#darkblueSmallPoint
default#greenPoint default#greenSmallPoint
default#bankIcon default#dpsIcon
default#metroMoscowIcon default#hospitalIcon
default#wifiIcon default#cafeIcon
default#airplaneIcon default#anchorIcon
default#mailPostIcon default#shopIcon

Полный список стандартных стилей для значков меток представлен в Справочнике по программному интерфейсу.

По умолчанию используется значок светло-голубого цвета (ключ стиля - "default#lightbluePoint") с пустым содержимым.

Чтобы применить встроенный стиль укажите его ключ при создании метки, например:

 // Создает метку с маленьким значком красного цвета
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(35, 55), {style: "default#redSmallPoint"});

Пример ниже размещает в видимой области карты несколько меток со стандартными стилями.

Открыть пример в новом окне

Создание пользовательского значка метки

Значок метки по умолчанию (светло-голубой) можно сменить на пользовательский. Выбрать значок можно из набора встроенных стилей, см. Задание стиля метки.

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

  1. Создайте новый стиль значка.
    Используйте конструктор класса YMaps.Style. Этот класс содержит набор данных, определяющих внешний вид объектов-оверлеев, помещаемых на карту, в том числе и стиль отображения значков меток.

    Например:

    // Создает стиль
    var s = new YMaps.Style();
    
    // Создает стиль значка метки
    s.iconStyle = new YMaps.IconStyle();
  2. Установите необходимые значения полей объекта YMaps.IconStyle.

    Задайте следующие поля:

    • href – URI графического файла значка;
    • size – размер значка в пикселах;
    • offset – сдвиг значка (в пикселах) относительно точки его позиционирования (используется для визуального выравнивания).

    Например:

    s.iconStyle.href = "/i/maps/icons/photo.png";
    s.iconStyle.size = new YMaps.Point(18, 29);
    s.iconStyle.offset = new YMaps.Point(-9, -29);
  3. Создайте новый стиль для тени значка (если требуется).

    Например:

    s.iconStyle.shadow = new YMaps.IconShadowStyle();
    s.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";
    s.iconStyle.shadow.size = new YMaps.Point(18, 29);
    s.iconStyle.shadow.offset = new YMaps.Point(-9, -29);
  4. Передайте созданный стиль либо в конструктор метки, либо в метод setStyle().

    Например:

    var placemark = new YMaps.Placemark(point, {style: s});
    map.addOverlay(placemark);

Открыть пример в новом окне

Внимание. Для пользовательского значка метки нельзя задать его содержимое напрямую. Управлять содержимым можно только с помощью механизма шаблонов, см. раздел Настройка внешнего вида.