Подключение API
Описание
Работа с картой возможна только после того, как в браузер будет загружен код API карт. Есть несколько способов его загрузки.
Простой способ
Сперва подключим API карт, поместив в секцию head HTML-страницы следующий код:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
Затем воспользуемся функцией DG.then
, в которую поместим код инициализации карты:
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
});
Внутри себя эта функция добавляет обработчик события загрузки страницы. Именно такой способ рассматривался в разделе Быстрый старт.
npm
API карт можно подключить через npm:
$ npm i 2gis-maps
После установки пакета подключим его через require
:
var DG = require('2gis-maps');
var map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
Обратите внимание, что при использовании npm-пакета использовать DG.then
не нужно.
Загрузка по требованию
Вы можете загрузить API карт именно в тот момент, когда карта станет нужна. Для этого в URL подключения API необходимо добавить параметр lazy=true
:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&lazy=true"></script>
Затем в нужный момент времени (например, при нажатии на кнопку) необходимо вызвать функцию DG.then
:
DG.then(function () {
map = DG.map('map', {
center: [54.98, 82.89],
zoom: 13,
});
});
Опции подключения
Ниже описаны все опции, которые может принимать URL загрузки API карт:
Опция | По умолчанию | Описание |
---|---|---|
pkg |
full |
Пакет загружаемых модулей. На данный момент поддерживается 2 пакета: full — все модули API; basic — базовая функциональность (попапы, маркеры, векторные объекты). |
skin |
dark |
Тема управляющих элементов (светлая или темная). Принимает значение light или dark . |
lazy |
false |
Если указать значение true , тогда API карт загрузится отложенно, при первом вызове DG.then . |
Функция DG.then
Как было описано ранее, функция DG.then
отвечает за отслеживание момента загрузки API карт и добавление обработчиков этого действия. Параметры функции:
Вызов | Возвращает | Описание |
---|---|---|
DG.then( <Function> resolve, <Function> reject ) |
Promise |
Регистрирует обработчики загрузки API. Пареметры: resolve — функция, срабатывающая при успешной загрузке API карт, reject — функция, срабатывающая в случае ошибки сервера. |
Вызов функции DG.then
в любой момент после загрузки API мгновенно выполнит обработчик.