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>

Перетаскиваемый маркер

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

Координаты маркера:

54.981, 82.891

<!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>