Метка

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

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

• Добавление метки на карту
• Значок метки
• Перетаскивание метки
• Задание стиля метки
• Создание пользовательского значка метки

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

Чтобы добавить метку на карту необходимо передать в конструктор класса 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") с пустым содержимым.

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

 // Создает метку с маленьким значком красного цвета
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);
   

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