Перейти к основному содержимому

Маркеры

Один маркер​

Чтобы добавить маркер (объект Marker) на карту, укажите его координаты:

const marker = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
});

Несколько маркеров​

Чтобы добавить несколько объектов Marker на карту, используйте цикл:

const coords = [
    [37.615655, 55.768005],
    [37.608676, 55.766095],
    [37.612247, 55.754607],
    [37.634183, 55.754402],
    [37.630123, 55.773231],
];
coords.forEach((coord) => {
    const marker = new mapgl.Marker(map, {
        coordinates: coord,
    });
});

Изменение иконки маркера​

Чтобы изменить иконку маркера, укажите параметр icon:

const marker = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
    icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});

Маркер с текстом​

Добавление текста​

Чтобы добавить текст для маркера, укажите параметр label:

const marker = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
    label: {
        text: "Подпись маркера",
    },
});

Выравнивание текста​

Чтобы изменить расположение текста, укажите параметры relativeAnchor и offset у label (см. LabelOptions для полного списка параметров):

// Выравнивание справа по центру
const rightCenter = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
    icon: '/img/mapgl/marker.svg',
    label: {
        text: 'Выравнивание справа по центру',
        offset: [20, 0],
        relativeAnchor: [0, 0.5],
    },
});
// Выравнивание по левому верхнему краю
const leftTop = new mapgl.Marker(map, {
    coordinates: [37.601921, 55.762252],
    icon: '/img/mapgl/marker.svg',
    label: {
        text: 'Выравнивание по левому верхнему краю',
        offset: [-10, -10],
        relativeAnchor: [1, 1],
    },
});

Фон текста​

Чтобы добавить фоновое изображение для текста, укажите параметр image (см. LabelImage для более подробного описания параметров):

const marker = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
    label: {
        text: "Подпись маркера",
        offset: [0, 25],
        relativeAnchor: [0.5, 0],
        image: {
            url: 'tooltip-top.svg',
            size: [100, 50],
            stretchX: [
                [10, 40],
                [60, 90],
            ],
            stretchY: [[20, 40]],
            padding: [20, 10, 10, 10],
        },
    },
});

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

События​

Чтобы подписаться на события, такие как нажатие на маркер, используйте метод on() (см. DynamicObjectEventTable для полного списка событий):

const marker = new mapgl.Marker(map, {
    coordinates: [37.615655, 55.768005],
    icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
marker.on('click', (e) => {
    alert('Вы кликнули на маркер');
});