Примеры | RasterJS API | 2GIS Documentation
RasterJS API

Работа с маркерами

Ниже приведены примеры использования маркеров. Маркер можно добавить на карту с помощью метода addTo(), но если вы планируете работать с группой марекров, мы рекомендуем использовать для этого FeatureGroup (смотрите разделы "Обработка событий группы маркеров" и "Отображение нескольких маркеров и подстройка границ"). Для получения подробной информации о маркерах перейдите в раздел документации Маркеры.

Маркер, при клике на который открывается попап с информацией:

<!DOCTYPE html>
<html>

<head>
    <title>Маркер с попапом</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 15
            });

            DG.marker([54.98, 82.89]).addTo(map).bindPopup('Я попап!');
        });
    </script>
</body>

</html>

Маркер, который пользователи могут перетаскивать:

<!DOCTYPE html>
<html>

<head>
    <title>Перетаскиваемый маркер</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    Координаты маркера: <div id="location">LatLng(54.98, 82.89)</div>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script type="text/javascript">
        var locationInfo = document.getElementById('location');

        DG.then(function () {
            var map,
                marker;

            map = DG.map('map', {
                center: [54.981, 82.891],
                zoom: 15
            });

            marker = DG.marker([54.981, 82.891], {
                draggable: true
            }).addTo(map);

            marker.on('drag', function (e) {
                var lat = e.target._latlng.lat.toFixed(3),
                    lng = e.target._latlng.lng.toFixed(3);

                locationInfo.innerHTML = lat + ', ' + lng;
            });
        });
    </script>
</body>

</html>

Вы можете задать маркеру собственную иконку или простой элемент div вместо изображения:

<!DOCTYPE html>
<html>

<head>
    <title>Маркер с пользовательской иконкой</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map,
                myIcon,
                myDivIcon;

            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });

            myIcon = DG.icon({
                iconUrl: 'https://maps.api.2gis.ru/2.0/example_logo.png',
                iconSize: [48, 48]
            });
            DG.marker([54.98, 82.89], {
                icon: myIcon
            }).addTo(map);

            myDivIcon = DG.divIcon({
                iconSize: [70, 20],
                html: '<b style="color:blue;">HTML-код</b>'
            });
            DG.marker([54.98, 82.87], {
                icon: myDivIcon
            }).addTo(map);
        });
    </script>
</body>

</html>

Есть возможность открыть попап "по требованию". К примеру, по клику в ссылку или кнопку:

<!DOCTYPE html>
<html>

<head>
    <title>Программное открытие маркера</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <button id='open-popup'>Открыть попап</button>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        var openPopupBtn = document.getElementById('open-popup');

        DG.then(function () {
            var map,
                marker;

            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 15
            });

            marker = DG.marker([54.98, 82.89]).addTo(map);
            marker.bindPopup('Я попап!');

            openPopupBtn.onclick = function () {
                marker.openPopup();
            }
        });
    </script>
</body>

</html>

У маркера есть два вида подсказок, обычная и статическая. Оба варианта рассматриваются в следующем примере:

<!DOCTYPE html>
<html>

<head>
    <title>Маркер с подсказкой</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 15
            });

            DG.marker([54.98, 82.89])
                .addTo(map)
                .bindLabel('Я статическая подсказка!', {
                    static: true
                });

            DG.marker([54.98, 82.88])
                .addTo(map)
                .bindLabel('Я обычная подсказка!');
        });
    </script>
</body>

</html>

При клике в маркер, карта будет центрироваться по его позиции:

<!DOCTYPE html>
<html>

<head>
    <title>Обработка событий группы маркеров</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map,
                marker1,
                marker2,
                marker3,
                group;

            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });

            marker1 = DG.marker([54.96, 82.889]).addTo(map);
            marker2 = DG.marker([54.98, 82.893]).addTo(map);
            marker3 = DG.marker([54.99, 82.896]).addTo(map);

            group = DG.featureGroup([marker1, marker2, marker3]);
            group.addTo(map);
            group.on('click', function (e) {
                map.setView([e.latlng.lat, e.latlng.lng]);
            });
        });
    </script>
</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>Анимированное движение маркера</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map,
                marker;

            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });

            marker = DG.marker([54.98, 82.89]).addTo(map);

            var increment = 0.001;

            function move() {
                if (!map.getBounds().contains(marker.getLatLng())) {
                    increment *= -1;
                }

                var newLat = marker.getLatLng().lat + increment,
                    newLng = marker.getLatLng().lng + increment;

                marker.setLatLng([newLat, newLng]);
            }

            setInterval(move, 60);
        });
    </script>
</body>

</html>

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

<!DOCTYPE html>
<html>

<head>
    <title>Отображение/удаление нескольких маркеров, fitBounds</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
</head>

<body>
    <input id="hide" type="button" value="hide markers" />
    <input id="show" type="button" value="show markers" />
    <div id="map" style="width: 100%; height: 400px;"></div>
    <script>
        DG.then(function () {
            var map,
                markers = DG.featureGroup(),
                coordinates = [];

            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });

            for (var i = 0; i < 100; i++) {
                coordinates[0] = 54.98 + Math.random();
                coordinates[1] = 82.89 + Math.random();
                DG.marker(coordinates).addTo(markers);
            }

            document.getElementById('hide').onclick = hideMarkers;
            document.getElementById('show').onclick = showMarkers;

            function showMarkers() {
                markers.addTo(map);
                map.fitBounds(markers.getBounds());
            };

            function hideMarkers() {
                markers.removeFrom(map);
            };
        });
    </script>
</body>

</html>