Возможности карты для разработчиков geoAPI (v 1.0) geoAPI (v 2.0) Обзор
API
Сервер обновлений 4geo Встраивание фотографий на сайт Развитие в регионах Установка справочника в домене Windows Создание «Метки» на карте Общие сведения Для компаний Сервис «Ленивый поиск» Cайт-визитка Ведение сайта-визитки Правила ведения сайта-визитки

geoAPI.maps.Map()

var map = new geoAPI.maps.Map(element, options, callback)

Это базовый класс для работы с картой. С помощью него можно получать доступ к любым пользовательским объектам, находящимся на карте. При создание нового объекта карты, происходит создание iframe, в котором размещается карта. Вызовы всех функций асинхронные. В связи с этим, большинство функций имеют callback (обратные вызовы);

Принимаемые параметры:
Параметр Описание Обязательный
element DOMElement, в котором будет отображаться карта да
options

набор настроек для инициализации карты

options.town - город, для которого будет открыта карта. Обязательный параметр.

options.street - улица, на которую произойдет перелёт сразу после создания карты. Необязательный параметр.

options.building - номер дома, на который произойдет перелёт (только если указана улица). Необязательный параметр.

options.disableMouseZoom - отключает зуммирование карты колёсиком мыши (по умолчанию false). Необязательный параметр.

 да
callback функция, которая выполнится когда карта будет создана нет
Если вы хотите разместить маркеры или произвести какие-либо действия с картой, то делайте это при вызове callback (так как создание карты - асинхронная операция).

На вашей странице может быть размещено несколько карт с которыми вы можете отдельно работать.


Пример кода создания карты

var options = {

town: 'Новокузнецк', street: 'Строителей', building: '24'

};

var element = document.getElementById('map_frame');

var map = new geoAPI.maps.Map(element, options, callback);

Навигация по карте

 Для выбора объектов на карте, перелёта к ним и показа окна с информацией предусмотрены методы locate для объекта geoAPI.maps.Map.
Метод Описание Параметры
locateAddress перелетает к выбранному адресу и открывает окно с информацией о нём options
locateBuilding перелетает к выбранному зданию и открывает окно с информацией о нём options
locateStreet перелетает к выбранной улице и открывает окно с информацией о нём options
locateTown перелетает к выбранному городу options
Options - объект, содержащий в себе следующие параметры:
Параметр Описание
options.town город
options.street улица
options.building номер дома
options.callback функция, которая выполнится когда закончится обработка перелёта на новый адрес
Все параметры в options не являются обязательными.

Методы для работы с объектами карты

Метод Описание Параметры
getMarkers() получить все маркеры на карте в виде объектов geoAPI.maps.Marker нет
clearMarkers() удалить все маркеры нет


Пример использования: Создание карты и ссылки для перелёта на адреса

<!-- Скрипт инициализирующий карту -->

<script type="text/javascript" src="http://4geo.ru/maps/js/4geoAPI.js" ></script>

<!-- Параметры для инициализации карты -->

var options = {

town: 'Новокузнецк', street: 'Строителей', building: '24'

};

<!-- Создание карты в элементе с id = 'map_frame1' -->

var map = new geoAPI.maps.Map(document.getElementById('map_frame1'), options);

</script>

<!-- Ссылки, меняющие состояние карты -->

<a href="javascript:map.locateBuilding({town:'Новокузнецк', street: 'Орджоникидзе', building: '35'});">Перейти к Орджоникидзе 35</a>

<a href="javascript:map.locateStreet({town:'Новокузнецк', street: 'Кирова'});">Перейти к Орджоникидзе 35</a>

<a href="javascript:map.locateTown({town: 'Красноярск'});">Перейти к Орджоникидзе 35</a>

Перейти к Орджоникидзе 35

Перейти к улице Кирова

Перейти к Красноярску


geoAPI.maps.Marker()

 С помощью geoAPI.maps.Marker можно добавлять на карту маркеры, изменять их положение, удалять а так же обрабатывать пользовательские события(например обработку кликов). geoAPI.maps.Marker предусматривает два способа расстановки маркеров:

- по широте и долготе

- по адресу

Параметры, принимаемые конструктором маркера:
Параметр Описание Тип
town город String
street улица String
building номер дома int
lon широта double
lat долгота double
imageUrl изображение для маркера (не обязательный параметр) string
imageWidth ширина изображения маркера (не обязательный параметр) int
imageHeight высота изображения маркера (не обязательный параметр) int
centrate включает автоматическое центрирование карты на маркере boolean
zoom уровень приближения карты int (0..7)

Пример кода создания маркеров

<!-- Создание маркера по адресу ул. Строителей 24 -->

var marker1 = new geoAPI.maps.Marker({

street: 'Строителей', building: '24'

});

<!-- Размещение маркера на карте -->

marker1.setMap(map);

<!-- Создание маркера с долготой 7090107 и широтой 9700303 -->

var marker2 = new geoAPI.maps.Marker({

lat: 7090107, lon: 9700303, centrate: true, zoom: 5,

});

<!-- Размещение маркера на карте -->

marker2.setMap(map);

Обработка событий маркера

Для обработки событий любых объектов на карте в geoAPI создан объект geoAPI.maps.event.

geoAPI.maps.event.addListener(marker, 'click', function() {

alert('На маркер кто-то кликнул');

});


Пример работы маркерами: Создание маркеров, установка событий

<!-- Скрипт инициализирующий карту -->

<script type="text/javascript" src="http://4geo.ru/maps/js/4geoAPI.js"></script>

<!-- Параметры для инициализации карты -->

var options = {

town: 'Новокузнецк'

};

<!-- Создание карты в элементе с id = 'map_frame' -->

var map = new geoAPI.maps.Map(document.getElementById('map_frame'), options, function() {

var marker1 = new geoAPI.maps.Marker({
street: 'Строителей', building: '24', centrate: true, zoom: 3

});

var marker2 = new geoAPI.maps.Marker({
lat: 7090107, lon: 9700303

});

geoAPI.maps.event.addListener(marker1, 'click', function() {
alert('Пользовательская обработка клика на маркер');

});

marker1.setMap(map2);

marker2.setMap(map2);

});

</script>

geoAPI.maps.MarkerGroup()

Группы маркеров - замена простым маркерам в случае, если их нужно много. В таком случае им могут быть поставлены одинаковые обработчики событий и их будет проще контролировать, чем отдельные маркеры. Группа маркеров состоит из отдельных маркеров класса geoAPI.maps.Marker. Параметры, принимаемые конструктором группы маркеров:
Параметр Описание
markers массив из параметров для каждого маркера

Пример кода создания группы маркеров

Для обработки событий любых объектов на карте в geoAPI создан объект geoAPI.maps.event.

<!-- Создание группы из двух маркеров -->

var markerGroup = new geoAPI.maps.MarkerGroup({

markers: [{

street: 'Строителей',

building: '24',

imageUrl: 'http://4geo.ru/maps/images/to_marker.png'

},{

street: 'Кирова',

building: '115'

}]

});

markerGroup.setMap(map);

geoAPI.maps.InfoWindow()

Всплывающие окна предназначены для вывода пользовательской информации на карте (например при клике на маркер).

Параметры, принимаемые конструктором:

Параметр Описание
content html код, который будет выведен во всплывающем окне

Методы:

Метод Описание Параметры
open(mapObject) открывает окно с информацией для объекта mapObject mapObject - пользовательский объект на карте (например маркер)
close() закрывает всплывающее окно нет

Пример кода создания всплывающего окна

<!-- Создание объекта со всплывающим окном -->

var infowindow = new geoAPI.maps.InfoWindow({
content: 'Info window content'
});

<!-- открыть всплывающее окно при клике на маркер -->

geoAPI.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker);
});

geoAPI.photos

 Сервис предназначен для получения фотографий объектов на карте (зданий, улиц, районов).

Методы сервиса:

Метод Описание Параметры
getPhotoByAddress получение ссылки на фотографию объекта по его адресу town, street, buildingNum, type - город, улица, номер дома и тип фотографии. Тип фотографии (original, small) определяет размер получаемой фотографии - большая или маленькая. Тип фотографии не является обязательным параметром (по умолчанию равен original)

Примеры кода использования сервиса фотографий

<!-- Получение ссылки на фотографию по её адресу -->

geoAPI.photos.getPhotoByAddress('Новокузнецк', 'Орджоникидзе', '35', 'small');