# Маркер

Вы можете задать маркеры для карты, используя компонент <ymap-marker>.

Важно!

Начиная с версии 0.10 маркеры можно задавать только используя компонент ymap-marker. Атрибут карты placemarks не поддерживается.

Обратите внимание

Для каждого маркера является обязательным указание свойста markerId

Вы можете указать тип маркера, используя атрибут marker-type. Допустимые значения:

Placemark
Polyline
Rectangle
Polygon
Circle

# Events

Event name	Payload
balloonclose	marker event
balloonopen
click
contextmenu
dblclick
drag
dragend
dragstart
hintclose
hintopen
mouseenter
mouseleave

Важно!

Начиная с версии 0.10 атрибут callbacks не поддерживается. Слушайте события у компонента.

# Attributes

Attribute	Type	Description	Marker-types
marker-id	String, Number	Id маркера. `Required`
marker-type	String	Тип маркера. Default: `Placemark`
coords	Array [ latitude, longitude ]	Координаты маркера или центр круга. `Required`	Placemark, Circle
coords	Array of arrays [ [latitude, longitude], [...] ]	Координаты вершин. `Required`	Rectangle, Polyline
coords	Array of two arrays of coordinates arrays (first for outer contour, second for inner) [ [[latitude, longitude], [...]], [[...], [...]] ]	Координаты вершин. `Required`	Polygon
marker-events	Array	Нативные события (события Я.Карт), которые эмитит маркер. Если не задано, то маркер будет эмитить все события, перечисленные в секции Events	All
hint-content	String	Содержимое подсказки	All
balloon	Object	Свойства балуна: header, body, footer	All
icon	Object	Иконка маркера	Placemark
marker-fill	Object	Свойства заливки: enabled, color, opacity, imageHref	Polygon, Rectangle, Circle
marker-stroke	Object	Свойства обводки: color, opacity, width, style	Polygon, Rectangle, Circle, Polyline
circle-radius	Number	Радиус окружности в метрах. Default: `1000`.	Circle
cluster-name	String	Имя кластера для группировки маркеров	All
properties	Object	Свойства маркера (opens new window)	All
options	Object	Опции маркера (opens new window)	All
balloon-template	String	HTML Template for balloon	All
balloon-component-props	Object	Объект пропсов для балуна. Только при инициализации балуна через balloonComponent	All

# Slots

Вы можете передать темплейт балуна для маркера, используя слот balloon. Вы также можете поместить в этот слот компонент, но имейте ввиду, что в балун передается только представление компонента, его визуальная часть. Если вы хотите использовать какую-то логику (например действие по нажатию на кнопку внутри балуна), то вы можете использовать событие маркера balloonopen и навешивать любые обработчики на элементы вашего балуна. Не забудьте удалить обработчики при наступлении события balloonclose. Пример Также Вы можете определить макет балуна через слот balloonLayout в маркере. Содержимое данного слота заменит содержание стандартного макета для балуна. Будьте осторожны, если вы используете слот balloonLayout, слот balloon будет игнорироваться.

# Icons

Вы можете задать настройки иконки маркера следующими полями: color (default: 'blue'), content, glyph. Свойство glyph имеет более высокий приоритете, чем content. Список цветов и иконок (opens new window). В этом случае вы получаете классический вид маркера.

Вы можете также задать вашу собственную иконку для маркера. В этом случае объект настроек должен выглядеть следующим образом:

{
  layout: 'default#image', // 'default#imageWithContent' для использования с контентом
  imageHref: markerIcon, // адрес изображения или data:image/svg+xml;base64
  imageSize: [43, 55], // размер иконки в px
  imageOffset: [-22, -55], // смещение иконки в px,
  /* Следующие поля актуальны для layout: 'default#imageWithContent' */
  content: 'some content here', // содержимое контента
  contentOffset: [-22, -55], // смещение контента в px,
  contentLayout: '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>' // строковый HTML шаблон для контента
}

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

← Карта