API 2GIS. Основные методы и классы. Добавление карты на сайт — PROG-TIME

API 2GIS. Основные методы и классы. Добавление карты на сайт

14.11.2023
Содержание:

В новой записи мы с вами рассмотрим API 2GIS и добавим карту на сайт. Мы разберём как добавлять метки на карту, выводить подсказки и добавлять фигуры на карту.

Для подключения карт от сервиса 2GIS вам необходимо в самом верху вашего проекта подключить скрипт.

<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>

Данная запись создана для демонстрации возможностей API 2GIS. Полное описание всех методов вы можете найти в официальной документации.

https://docs.2gis.com/ru

Добавление простой карты от 2GIS на сайт

Для добавления карты без меток и подсказок, вам необходимо создать контейнер для карты и прописать небольшой скрипт.

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

Добавление статичной карты от 2GIS на сайт

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

<div id="map" style="width: 100%; height: 400px;"></div>
<script>
    DG.then(function() {
        DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13,
            dragging : false,
            touchZoom: false,
            scrollWheelZoom: false,
            doubleClickZoom: false,
            boxZoom: false,
            geoclicker: false,
            zoomControl: false,
            fullscreenControl: false
        });
    });
</script>

Настройка ограничений по зуму на 2GIS карте

Для указания максимального и минимального уровня зума, вам необходимо передать параметры minZoom и maxZoom.

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

Добавление метки на карту

Для добавление метки на карту вы можете воспользоваться методом DG.marker([координаты]) передав в качестве параметра координаты точки куда необходимо поставить метку.

<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);
    });
</script>

Добавление метки с балуном на карту 2GIS

Для добавление метки с всплывающем окном вам необходимо воспользоваться методом bindPopup(‘Сообщение’).

<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('Я метка от ProgTime!');
    });
</script>

Перетаскивание маркера по 2GIS карте

Для добавления возможности взаимодействия пользователя с маркером вам необходимо добавить обработчик событий drag.

Координаты маркера: <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>
Координаты маркера:
LatLng(54.98, 82.89)

Добавление изображения для метки на 2GIS карту

2GIS позволяет в качестве метки использовать своё изображение или простой HTML текст, для этого вам необходимо создать специальный объект и передать его в качестве второго параметра в метод DG.marker().

Для добавления изображения в качестве иконки создадим объект с помощь метода DG.icon(), а для добавления HTML кода используем метод DG.divIcon().

<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://prog-time.ru/wp-content/uploads/2021/04/16.jpg',
            iconSize: [48, 48]
        });
        DG.marker([54.98, 82.89], {
            icon: myIcon
        }).addTo(map);

        /* добавление HTML на карту */
        myDivIcon = DG.divIcon({
            iconSize: [70, 20],
            html: "<b style='color:red;'>ProgTime</b>"
        });
        DG.marker([54.98, 82.87], {
            icon: myDivIcon
        }).addTo(map);
    });
</script>

Открытие балуна на 2GIS карте по событию

Вы можете настроить открытие окна на метке при нажатии на кнопку, для этого вам необходимо просто добавить обработчик события на кнопку и запустить метод marker.openPopup().

<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('Я попап от ProgTime!');

        /* открытие окна по нажатию на кнопку */
        openPopupBtn.onclick = function() {
            marker.openPopup();
        }
    });
</script>

Добавление маркера со статической подсказкой

Статическая подсказка представляет из себя сообщение, которое выводится всегда на карте по указанным координатам.

<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
            });
    });
</script>

Добавление маркера с подсказкой при наведение

2GIS карты так же позволяют создавать метки с подсказками, которые показываются при наведение на метку.

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

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

Отображение ломаной на карте 2GIS

Для отображения ломаной на карте вам необходимо воспользоваться методом DG.polyline(). Первым аргументом вы передаёте объект с точками координат ломаной, а вторым аргументом передаётся объект с параметрами отображения ломаной.

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

        map = DG.map('map', {
            center: [55.036446, 82.897983],
            zoom: 11
        });

        coordinates = [[55.069288, 82.991367], [55.069288, 82.816615], [55.011648, 82.902103], [54.944714, 82.903152], [54.928935, 82.850967], [54.928541, 82.976280], [54.944517, 82.916541], [55.011704, 82.916885], [55.056508, 82.973514], [55.056508, 82.835498], [55.056705, 82.973857], [55.069288, 82.991367], [55.069288, 82.941928], [55.097193, 82.959094], [55.046282, 82.919956], [55.045692, 82.904163], [55.036446, 82.897983], [55.029756, 82.907596], [55.018932, 82.903819], [55.029362, 82.914119], [55.030543, 82.927165], [55.037823, 82.933345], [55.045101, 82.925105], [55.069681, 82.941928]];

        // создаем ломаную из массива географических точек
        polyline = DG.polyline(coordinates, {
            color: 'blue'
        }).addTo(map);

        // подстраиваем центр карты и масштаб, чтобы ломаную было видно
        map.fitBounds(polyline.getBounds());
    });
</script>

Отображение геометрических фигур на карте 2GIS

Небольшой пример вывода разных фигур на одну карту с подсказками при наведение и балунами. На карте продемонстрирован вывод прямоугольника, многоугольника и круга на карту 2GIS, а так же показан вывод красного круглого маркера.

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

        DG.circle([54.98, 82.87], 200, {color: 'red'})
            .bindPopup('Я круг')
            .bindLabel('Нажми на круг')
            .addTo(map);

        DG.circleMarker([54.985, 82.89])
            .bindPopup('Я круглый маркер')
            .bindLabel('Нажми на круглый маркер')
            .setRadius(100)
            .addTo(map);

        DG.rectangle(
            [[54.98, 82.87], [54.975, 82.91]],
            {color: 'green'})
            .bindPopup('Я прямоугольник')
            .bindLabel('Нажми на прямоугольник')
            .addTo(map);

        DG.polygon(
            [[54.985, 82.875], [54.98, 82.96], [54.979, 82.92]],
            {color: 'yellow'})
            .bindPopup('Я многоугольник')
            .bindLabel('Нажми на многоугольник')
            .addTo(map);
    });
</script>
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Контакты для связи

Технология на prog-time
Telegram
https://t.me/prog_time_bot