Подсказки

Чтобы показать всплывающую подсказку при наведении курсора на объект, нужно создать HTML-элемент и показывать/скрывать его в обработчиках событий mouseover и mouseout.

Подсказка для маркера

Например, чтобы добавить подсказку для маркера, нужно добавить обработчики для событий mouseover и mouseout при помощи метода on():

marker.on('mouseover', (e) => {
    console.log('курсор перешёл на маркер');
});
marker.on('mouseout', (e) => {
    console.log('курсор покинул маркер');
});

Основной смысл в том, чтобы показать HTML-элемент в обработчике mouseover и скрыть его в обработчике mouseout. Координаты для показа элемента можно получить через объект события (см. MapPointerEvent).

Перед показом элемент нужно скрыть и указать абсолютное позиционирование (position: absolute; или position: fixed;). Кроме этого, нужно указать для свойства pointer-events значение none или добавить небольшой отступ для элемента. Если этого не сделать, подсказка будет показана прямо под курсором, что приведет к событию mouseout, обработчик которого скроет подсказку.

Пример разметки для простой подсказки:

<style>
    #tooltip {
        padding: 20px 40px;
        background: #fff;
        display: none;
        position: fixed;
        pointer-events: none;
    }
</style>
<div id="tooltip">Hello, world!</div>

Примера кода, который покажет подсказку при наведении курсора на маркер:

const tooltipEl = document.getElementById('tooltip');

marker.on('mouseover', (event) => {
    // Отступ в пикселях
    const offset = 5;

    tooltipEl.style.top = `${event.point[1] + offset}px`;
    tooltipEl.style.left = `${event.point[0] + offset}px`;
    tooltipEl.style.display = 'block';
});

marker.on('mouseout', (e) => {
    tooltipEl.style.display = 'none';
});

Полный пример кода приведён ниже. Наведите курсор на маркер, чтобы увидеть подсказку.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Example of a tooltip for a marker" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #tooltip {
                padding: 20px 40px;
                background: #fff;
                box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                display: none;
                position: fixed;
                pointer-events: none;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="tooltip">Hello, world!</div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });
            const marker = new mapgl.Marker(map, {
                coordinates: [55.31878, 25.23584],
                icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
            });
            const tooltipEl = document.getElementById('tooltip');

            marker.on('mouseover', (event) => {
                // Offset in pixels
                const offset = 5;

                tooltipEl.style.top = `${event.point[1] + offset}px`;
                tooltipEl.style.left = `${event.point[0] + offset}px`;
                tooltipEl.style.display = 'block';
            });

            marker.on('mouseout', (e) => {
                tooltipEl.style.display = 'none';
            });
        </script>
    </body>
</html>

Подсказка для геометрической фигуры

Подсказки можно добавлять и для других типов объектов. Например, чтобы добавить подсказку для линии, нужно добавить обработчики для тех же двух событий mouseover и mouseout, которые были использованы в примере выше.

Далее приведён полный пример кода. Чтобы увидеть подсказку, наведите курсор на линию.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Example of a tooltip for a polyline" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #tooltip {
                padding: 20px 40px;
                background: #fff;
                box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
                border-radius: 4px;
                display: none;
                position: fixed;
                pointer-events: none;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="tooltip">Hello, world!</div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {
                center: [55.31878, 25.23584],
                zoom: 13,
                key: 'Your API access key',
            });
            const polyline = new mapgl.Polyline(map, {
                coordinates: [
                    [55.28770929, 25.22069944],
                    [55.28976922, 25.25656786],
                    [55.33096795, 25.22007825],
                    [55.33302789, 25.25687836],
                ],
                width: 10,
                color: '#00b7ff',
            });
            const tooltipEl = document.getElementById('tooltip');

            polyline.on('mouseover', (event) => {
                // Offset in pixels
                const offset = 5;

                tooltipEl.style.top = `${event.point[1] + offset}px`;
                tooltipEl.style.left = `${event.point[0] + offset}px`;
                tooltipEl.style.display = 'block';
            });

            polyline.on('mouseout', (e) => {
                tooltipEl.style.display = 'none';
            });
        </script>
    </body>
</html>