Общие сведения
При помощи API карт вы сможете:
- создавать интерактивные карты на веб-странице;
- показывать на карте различные объекты (маркеры, попапы, геометрические объекты);
- производить поиск на карте: определять координаты геообъектов по их названиям и названия по координатам.
Исходный код API карт доступен на GitHub, проект открыт к предложениям и пулл-реквестам.
Начало работы
Ниже приведен простой пример создания карты.
Подключите API
Для подключения JavaScript кода API добавьте в секцию head HTML-страницы следующий код:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
Если вас интересует подключение кода API с помощью npm, перейдите в раздел Подключение API.
Создайте контейнер карты
Для создания контейнера, в котором будет отображаться карта, необходимо добавить блочный HTML-элемент необходимого вам размера:
<body>
<div id="map" style="width:500px; height:400px"></div>
</body>
Создайте карту
Теперь все готово к тому, чтобы создать карту. Для этого добавьте следующий код в секцию head:
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
});
</script>
В данном примере карта принимает два параметра:
- center - координаты центра карты в формате [широта, долгота];
- zoom - коэффициент масштабирования в диапазоне от 1 до 18.
Добавьте маркер на карту
После создания карты вы можете отобразить на ней маркер, добавив одну строку кода в написанный ранее код:
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
DG.marker([54.98, 82.89]).addTo(map);
});
</script>
Покажите попап с информацией
Если немного расширить добавленную выше строку кода с маркером, тогда при клике в маркер будет отображаться попап (всплывающий блок) с необходимой вам информацией:
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');
});
</script>
Всё вместе
Результирующий код:
<!DOCTYPE html>
<html>
<head>
<title>API карт 2ГИС</title>
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<script type="text/javascript">
var map;
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('Вы кликнули по мне!');
});
</script>
</head>
<body>
<div id="map" style="width:500px; height:400px"></div>
</body>
</html>
Дальнейшие шаги
Всё получилось? Теперь можно ознакомиться с руководством для разработчиков и примерами использования.
Техническая поддержка
Если у вас возникли сложности в работе с API карт — напишите нам письмо и мы обязательно поможем вам разобраться.