Описание
Раздел содержит примеры кода основных возможностей, которые помогут вам прейти с API карт
версии 1.0 на API карт версии 2.0.
Подключение API
Версия 1.0 |
Версия 2.0 |
<script src="https://maps.api.2gis.ru/1.0"> </script> DG.autoload(function() { // инициализация карты ... }); |
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"> </script> 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); }); |