На страницах своего блога я не раз рассказывал об API 2GIS.
В этой заметке я хочу познакомить Вас с новой версией API 2.0 карт 2GIS, которая стала доступна для использования всем желающим совсем недавно.
В основу новой версии API 2GIS легла open-source библиотека Leaflet.
Вы также можете прочитать о ней на моем блоге.
Познакомиться с новой версией можно здесь, документация доступна по адресу http://api.2gis.ru/doc/maps/quickstart/.
Я же познакомлю с типичными примерами ее использования.
Первый пример — базовая карта с меткой.
Код будет иметь вид:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Базовая карта API 2.0 карт 2ГИС</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
"center": [56.326944, 44.0075],
"zoom": 15
});
DG.marker([56.326944, 44.0075]).addTo(map).bindPopup('Вы кликнули по мне!');
});
</script>
</head>
<body>
<div id="map" style="width:100%; height:600px"></div>
</body>
</html> |
Давайте рассмотрим код подробнее.
В начале мы подключаем само API карт в строке
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script> |
Атрибут data-id="dgLoader" является обязательным.
Переменная pkg отвечает за загружаемый пакет модулей.
Она имеет два значения:
full — все модули API; basic — базовая функциональность.
Пакет basic содержит в себе базовые функции:
— карта;
— маркеры;
— балуны;
— растровые слои;
— GeoJSON-слой;
— геометрии;
— группы;
— контрол полноэкранного режима;
— масштабная линейка.
Пакет full дополнительно включает в себя:
— подсказки;
— линейку измерения расстояний;
— контрол геолокации;
— функцию для работы с Ajax;
— класс для работы с WKT-форматом;
— геокликер.
Еще при загрузке могут использоваться дополнительные параметры:
skin — тема карты (светлая или темная). Принимает значение light или dark.
По умолчанию dark.
mode — Если указать значение debug, тогда загрузится несжатый JavaScript код API (удобно при отладке приложений). По умолчанию null.
lazy — Если указать значение true, тогда API карт загрузится отложено, при первом вызове DG.then. По умолчанию false.
sprite — По умолчанию иконки отдаются в svg закодированном в base64 за исключением ie8 и touch-устройств (для них собирается спрайт). Можно принудительно запросить спрайт для всех платформ и браузеров, передав параметр true. По умолчанию false.
Далее задаются начальные параметры карты:
имя id контейнера;
координаты центра и начальный масштаб.
У карты существует многообразный набор опций, со всеми можно познакомиться здесь.
А я расскажу об одной geoclicker.
Данная опция отвечает за то, включено ли геокодирование по клику (геокликер).
Если установлено значение true, тогда при клике по любому объекту карты (улицы, дома, остановки) будет отображаться информация об этом объекте.
Также есть дополнительные опции showPhotos и showBooklet позволяют отключить в балуне организации ссылки на буклеты и фотографии.
Рассмотрим код примера с включенной опцией геокликер.
Вот код нашего примера:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Геокликер API 2.0 карт 2ГИС</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [56.326944, 44.0075],
zoom: 15,
geoclicker: true
});
DG.marker([56.326944, 44.0075]).addTo(map).bindPopup('Вы кликнули по мне!');
});
</script>
</head>
<body>
<div id="map" style="width:100%; height:600px"></div>
</body>
</html> |
Щелкаем по любому объекту и наблюдем информацию о нем
Вернемся к первому примеру.
В строке кода:
DG.marker([56.326944, 44.0075]).addTo(map).bindPopup('Вы кликнули по мне!'); |
на карту с координатами добавляется стандартная метка, при клике по которой открывается балун с текстом: «Вы кликнули по мне!».
Вместо стандартной иконки, Вы можете добавить свою или простой div.
Код примера:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Метка с пользовательской иконкой API 2.0 карт 2ГИС</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [56.286193216997, 43.931031391717],
zoom: 15,
geoclicker: true
});
cinemaIcon = DG.icon({
iconUrl: 'cinema.png',
iconSize: [32, 37]
});
DG.marker([56.286193216997, 43.931031391717], {
icon: cinemaIcon
}).addTo(map).bindPopup('Каро Фильм РОССИЯ');
});
</script>
</head>
<body>
<div id="map" style="width:100%; height:600px"></div>
</body>
</html> |
С начала мы задаем свой стиль для отображения иконки cinemaIcon, задаем url-файла с изображением и размер значка метки.
Далее добавляем метку на карту с данным стилем.
Кроме меток на карту можно добавлять различные геометрические фигуры: круги, ломаные линии, многоугольники.
Пример с различными геометриями.
Вот код нашего примера:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Геометрические фигуры API 2.0 карт 2ГИС</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script>
<script type="text/javascript">
DG.then(function() {
var map;
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>
</head>
<body>
<div id="map" style="width:100%; height:600px"></div>
</body>
</html> |
И последний пример — это отображение данных в формате GeoJSON.
Вот код нашего примера:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Отображение объектов в формате GeoJSON API 2.0 карт 2ГИС</title>
<script src="http://maps.api.2gis.ru/2.0/loader.js?pkg=full" data-id="dgLoader"></script>
<script type="text/javascript">
DG.then(function() {
var map;
map = DG.map('map', {
center: [56.286193216997, 43.931031391717],
zoom: 17
});
var data = [
{
"type": "Feature",
"properties": {
"info": "Я маркер"
},
"geometry": {
"type": "Point",
"coordinates": [43.931031391717, 56.286193216997]
}
},
{
"type": "Feature",
"properties": {
"info": "Я полигон"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[43.9286, 56.2862],
[43.9322, 56.2854],
[43.9325, 56.2859],
[43.9315, 56.2861],
[43.9318, 56.2864],
[43.9310, 56.2866],
[43.9312, 56.2869],
[43.9299, 56.2872],
[43.9302, 56.2875],
[43.9296, 56.2877],
[43.9286, 56.2862]
]
]
}
}
];
DG.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.info);
}
}).addTo(map);
});
</script>
</head>
<body>
<div id="map" style="width:100%; height:600px"></div>
</body>
</html> |
Как я уже писал, подробности о работе с новым API 2.0 карт 2GIS можно узнать из документации, там же есть страница с примерами работы.
И в самом конце посмотрите небольшое видео о новом API карт 2GIS