Описание
Раздел содержит примеры кода основных возможностей, которые помогут вам прейти с 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);
});
|