dg-loading

Описание

Работа с картой возможна только после того, как в браузер будет загружен код 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 мгновенно выполнит обработчик.