Руководство по переходу на API 2.0

Описание

Раздел содержит примеры кода основных возможностей, которые помогут вам прейти с API карт версии 1.0 на API карт версии 2.0.

Подключение API

Версия 1.0 Версия 2.0
<script src="https://maps.api.2gis.ru/1.0"></script&gt; DG.autoload(function() { // инициализация карты ... }); <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script&gt; DG.then(function() { // инициализация карты ... });

Инициализация карты

Версия 1.0 Версия 2.0
var map = new DG.Map('map'); var center = new DG.GeoPoint(82.89, 55.98); map.setCenter(center, 13); var map = DG.map('map', { 'center': [54.98, 82.89], 'zoom': 13 });

Отображение маркера

Добавление на карту маркера с картинкой по умолчанию:

Версия 1.0 Версия 2.0
var position = new DG.GeoPoint(82.89, 54.98); var marker = new DG.Markers.Common({ geoPoint: position }); map.markers.add(marker); DG.marker([54.98, 82.89]).addTo(map);

Добавление на карту маркера с адаптивной пользовательской картинкой:

Версия 1.0 Версия 2.0
var position = new DG.GeoPoint(82.89, 54.98); var desktopParams = [ 'desktop-icon.png', 24, 24, function() { return new DG.Point(-12, -12) } ]; var mobileParams = [ '{density}-icon.png', 34, 34, function() { return new DG.Point(-17, -17) } ]; var myIcon = DG.Utils.getAdaptiveIcon({ desktop: desktopParams, mobile: mobileParams }); var marker = new DG.Markers.Common({ geoPoint: position, icon: myIcon }); map.markers.add(marker); var myIcon = DG.icon({ iconUrl: 'my-icon.png', iconRetinaUrl: 'my-icon@2x.png', iconSize: [24, 24], iconAnchor: [-12, -12] }); DG.marker([54.98, 82.89], { icon: myIcon }).addTo(map);

Отображение группы маркеров

Версия 1.0 Версия 2.0
map.markers.createGroup('myGroup'); map.markers.add(marker1, 'myGroup'); map.markers.add(marker2, 'myGroup'); map.markers.add(marker3, 'myGroup'); DG.layerGroup([marker1, marker2]) .addLayer(marker3).addTo(map);

Отображение маркера с привязанным попапом

Версия 1.0 Версия 2.0
var position = new DG.GeoPoint(82.89, 54.98); var marker = new DG.Markers.MarkerWithBalloon({ geoPoint: position, balloonOptions: { contentHtml: 'Я бабочка!' } }); map.markers.add(marker); DG.marker([54.98, 82.89]) .addTo(map).bindPopup('Я бабочка!');

Отображение попапа

Версия 1.0 Версия 2.0
var position = new DG.GeoPoint(82.89, 54.98); var myBalloon = new DG.Balloons.Common({ geoPoint: position, contentHtml: 'Привет!' }); map.balloons.add(myBalloon); DG.popup() .setLatLng([54.98, 82.89]) .setContent('Привет!') .addTo(map);

Отображение элемента управления

Отображение пользовательского элемента управления в правом верхнем углу карты:

Версия 1.0 Версия 2.0
var myControl = new MyControl(); var positionOffset = new DG.Point(0, 0); var position = new DG.ControlPosition(DG.ControlPosition.TOP_RIGHT, positionOffset); map.controls.add(myControl, null, position); DG.control({ position: 'topright' }) .addTo(map)

Подписка на события

Версия 1.0 Версия 2.0
var callback = function(e) { console.log(e.getPoint()); }; map.addEventListener(map.getContainerId(), 'DgClick', callback); map.on('click', function(e) { console.log(e.latlng); });