В новой записи мы с вами рассмотрим API 2GIS и добавим карту на сайт. Мы разберём как добавлять метки на карту, выводить подсказки и добавлять фигуры на карту.
Для подключения карт от сервиса 2GIS вам необходимо в самом верху вашего проекта подключить скрипт.
<script src="https://maps.api.2gis.ru/2.0/loader.js"></script>Данная запись создана для демонстрации возможностей API 2GIS. Полное описание всех методов вы можете найти в официальной документации.
Добавление простой карты от 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>Добавление изображения для метки на 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>
