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

Описание

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

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

Версия 1.0 Версия 2.0 
<script src="http://maps.api.2gis.ru/1.0" ></script>

DG.autoload(function() {
    // инициализация карты
    ...
});
 
<script src="http://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);


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([50.505, 30.57], {
    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.myControl({ 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);
});

Геокодирование

Используя функцию DG.ajax вы можете отправить в API справочника не только запрос на преобразование координат в адрес и наоборот, но и любой другой запрос, после чего обработать ответ необходимым способом:

Версия 1.0Версия 2.0
 
DG.Geocoder.get('Москва', {
    success: function(response) {
        console.log(response);
    },
    failure: function(code, message) {
        console.log(code, message);
    }
});

DG.ajax('http://catalog.api.2gis.ru/2.0/search', {
    data: {
        key: '1', // ваш ключ
        type: 'geo',
        what: 'Москва'
    },
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.log(error);
    }
});