Основы
Компания "Визиком" предоставляет удобный механизм для интеграции online карты в web-страницу.
Данное руководство описывает все возможности Visicom Maps API.
С помощью данного механизма вы сможете разместить на карте Ваши объекты, пометить площадной объект, проложить кратчайший маршрут.
На данной странице показан пример простейшей интеграции карты в веб-страницу.
Пример интеграции карты:
Карта Киева
Исходный код:
Для установки карты на своем сайте, достаточно создать HTML файл со следующим содержанием.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Тест интеграции online карты : Визиком</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
v\:* { behavior: url(#default#VML) }
</style>
</head>
<body onload="init();">
<!-- Подключение карты -->
<script type="text/javascript" src="http://maps.visicom.ua/api/1.0.0/getMap?map=ukraine_ru"></script>
<!-- Элемент, в котором будет прорисовываться карта -->
<div>
<div id="viewport" style="width: 800px; height: 600px; background-color: #faf5e6;">
<!-- copyright -->
<a id="visicom_copyright_link" href="http://maps.visicom.ua">карта киева</a>
</div>
</div>
<!-- Скрипт инициализации карты -->
<script type="text/javascript">
function init() {
// Инициализация "движка"
// Передаем Id элемента, в котором будет нарисована карта
var map = new VMapEngine(document.getElementById('viewport'));
// Центрирование карты в заданной точке (географические координаты)
// и с заданным индексом масштаба (6)
map.setCenter(new VGeoPoint(30.511413, 50.455203), 6);
// Инициализация карты
map.initialize();
}
</script>
</body>
</html>
Скрипт инициализации должен вызываться единожды при загрузке странице, перед вызовом других API-функций.
Размещать его желательно в конце документа, перед закрывающим тегом </body>.
Класс VMapEngine
VMapEngine является основным классом "движка" интернет-карты.
Конструкторы
| Конструктор |
|---|
| VMapEngine(<HTMLElement> viewport) |
Методы
| Название метода | Возвращаемое значение | Описание |
|---|---|---|
| addLayer(<VLayer> layer) | Добавляет слой. | |
| addMarker(<VMarker> marker) | Добавляет маркер на карту. | |
| addPolygone(<VPolygone> polygone) | Добавляет полигон на карту. | |
| addPolyline(<VPolyline> polyline) | Добавляет кривую на карту. | |
| addRoute(<VRoute> route) | Добавляет маршрут на карту. | |
| createBounds(<VPoint[]> points) | Создает область по перечню точек. | |
| getCenter() | <VPoint> | Возвращает координаты текущего центра карты. |
| getClientRect() | <VBounds> | Возвращает видимую пользователем область на карте. |
| getZoomIndex() | int | Возвращает текущий индекс масштаба. |
| panTo(<VGeoPoint> point) | Плавное перемещение к указанной точке. | |
| panTo(<VPoint> point) | Плавное перемещение к указанной точке. | |
| removeLayer(<VLayer> layer) | Удаляет слой. | |
| removeMarker(<VMarker> marker) | Удаляет маркер с карты. | |
| removePolygone(<VPolygone> polygone) | Удаляет полигон с карты. | |
| removePolyline(<VPolyline> polyline) | Удаляет кривую с карты. | |
| removeRoute(<VRoute> route) | Удаляет маршрут с карты. | |
| repaintMap() | Перерисовка карты. | |
| resizeViewport() | Данный метод необходимо вызывать в случае изменения размеров области карты. | |
| setCenter(<VPoint> point, <int> [zoom_index]) | Установка центра карты и масштаба. | |
| setCenter(<VBounds> bounds) | Установка центра карты и масштаба, на котором заданная область будет видна. | |
| setZoomIndex(<int> zoom_index) | Устанавливает текущий индекс масштаба. | |
| showMap() | Отображение карты. | |
| switchMap(<String> mapName, <String> language, <function> callback) | Меняет карту и/или язык. Доступные значения базы "ukraine". Языки: "ua", "ru", "en". Пример переключения карты на украинский язык: map.switchMap("ukraine", "ua"); Функция callback задается пользователем и вызывается, когда смена карты происходит. | |
| zoomIn() | Увеличивает масштаб на единицу. | |
| zoomOut() | Уменьшает масштаб на единицу. |
События
| Название события | Аргументы | Описание |
|---|---|---|
| События карты | ||
| zoomchange | <Integer> old_index, <Integer> new_index | Смена индекса масштаба. |
| startdrag | <VPoint> point | Начало перемещения карты. |
| dragging | <VPoint> point | Перемещение карты. |
| enddrag | <VPoint> point | Окончание перемещения карты. |
| События мыши | ||
| mouseclick | <VPoint> point | Клик. |
| mousedown | <VPoint> point | Нажатие клавиши мыши. |
| mousemove | <VPoint> point | Движение мышью. |
| mousedblclick | <VPoint> point | Двойной клик. |
| mouseup | <VPoint> point | Отпускание клавиши мыши. |