Быстрый старт
Ниже описан простой пример создания карты.
Для получения полной информации по API следует обратиться к «Руководству».
Сейчас мы по шагам создадим карту с маркером, при клике по которому появляется балун.
Во-первых, нужно загрузить библиотеку карты. Для этого вставим в HTML-код в секцию head:
<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>Затем добавим контейнерный HTML-элемент, внутри которого будет показываться карта. В данном примере карта будет загружена в области 500×400 пикселей.
<div id="myMapId" style="width:500px; height:400px"></div>Теперь мы готовы к тому, что создать карту. Вставим пример кода для секции head:
<script type="text/javascript">
// Создаем обработчик загрузки страницы:
DG.autoload(function() {
// Создаем объект карты, связанный с контейнером:
var myMap = new DG.Map('myMapId');
// Устанавливаем центр карты и коэффициент масштабирования:
myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826),15);
// Добавляем элемент управления коэффициентом масштабирования:
myMap.controls.add(new DG.Controls.Zoom());
});
</script>Функция DG.autoload примечательна тем, что внутри себя она добавляет обработчик на событие полной загрузки страницы. Внутри обработчика происходит следующее.
Создаем объект карты, связанный с контейнером:
var myMap = new DG.Map('myMapId');Устанавливаем центр карты — город Новосибирск и коэффициент масштабирования — 15:
myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826), 15); // коеффициент масштабирования может принимать значение в диапазоне от 1-го до 17-тиДобавляем элемент управления коэффициентом масштабирования:
myMap.controls.add(new DG.Controls.Zoom());Итого, вот мы и создали нашу первую карту:
<!DOCTYPE html>
<html>
<head>
<title>Моя карта</title>
<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>
<script type="text/javascript">
// Создаем обработчик загрузки страницы:
DG.autoload(function() {
// Создаем объект карты, связанный с контейнером:
var myMap = new DG.Map('myMapId');
// Устанавливаем центр карты, и коэффициент масштабирования:
myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826), 15);
// Добавляем элемент управления коэффициентом масштабирования:
myMap.controls.add(new DG.Controls.Zoom());
});
</script>
</head>
<body>
<div id="myMapId" style="width:500px; height:400px"></div>
</body>
</html>Но карта пока пустая. Исправим ситуацию. Добавим следующий код в функцию DG.autoload, не удаляя существующий код.
// Создаем балун:
var myBalloon = new DG.Balloons.Common({
// Местоположение на которое указывает балун:
geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826),
// Устанавливаем текст, который будет отображатся при открытии балуна:
contentHtml: 'Привет!<br>Вы кликнули по мне :)'
});
// Создаем маркер:
var myMarker = new DG.Markers.Common({
// Местоположение на которое указывает маркер:
geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826),
// Функция, вызываемая при клике по маркеру
clickCallback: function() {
if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) {
// Если балун еще не был добавлен на карту, добавляем его:
myMap.balloons.add(myBalloon);
} else {
// Показываем уже ранее добавленный на карту балун
myBalloon.show();
}
}
});
// Добавить маркер на карту:
myMap.markers.add(myMarker);И теперь всё вместе:
<!DOCTYPE html>
<html>
<head>
<title>Моя карта</title>
<script type="text/javascript" src="http://maps.api.2gis.ru/1.0"></script>
<script type="text/javascript">
// Создаем обработчик загрузки страницы:
DG.autoload(function() {
// Создаем объект карты, связанный с контейнером:
var myMap = new DG.Map('myMapId');
// Устанавливаем центр карты, и коэффициент масштабирования:
myMap.setCenter(new DG.GeoPoint(82.927810142519,55.028936234826), 15);
// Добавляем элемент управления коэффициентом масштабирования:
myMap.controls.add(new DG.Controls.Zoom());
// Создаем балун:
var myBalloon = new DG.Balloons.Common({
// Местоположение на которое указывает балун:
geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826),
// Устанавливаем текст, который будет отображатся при открытии балуна:
contentHtml: 'Привет!<br>Вы кликнули по мне :)'
});
// Создаем маркер:
var myMarker = new DG.Markers.Common({
// Местоположение на которое указывает маркер:
geoPoint: new DG.GeoPoint(82.927810142519,55.028936234826),
// Функция, вызываемая при клике по маркеру
clickCallback: function() {
if (! myMap.balloons.getDefaultGroup().contains(myBalloon)) {
// Если балун еще не был добавлен на карту, добавляем его:
myMap.balloons.add(myBalloon);
} else {
// Показываем уже ранее добавленный на карту балун
myBalloon.show();
}
}
});
// Добавить маркер на карту:
myMap.markers.add(myMarker);
});
</script>
</head>
<body>
<div id="myMapId" style="width:500px; height:400px"></div>
</body>
</html>Всё понятно? Значит теперь вас ждёт «Руководство».