Список функций JS библиотеки управления картой

Материал из Map.BY
Перейти к: навигация, поиск

Для управления картой

Наименование Описание
Map(id: '{id}',apiKey:'{api_key}') Инициализация контейнера карты. Параметры:
setView(lat:{Lat},lon:{Lon},zoom:{Zoom}) Перемещение центральной точки отображения карты по указанным координатам в указанном приближении Параметры:
  • Lat – параметр координаты
  • Lon – параметр координаты
  • Zoom – Уровень приближения (5-18)
M.Marker({lat:{Lat},lon:{Lon}}) Создание объекта маркера. Параметры:
  • Lat – параметр координаты
  • Lon – параметр координаты
addMarker({obj}) Добавления маркера на карту Параметры:
  • obj- объект, создаваемый методом M.Marker
removeLayer({obj}) Удаление маркера с карты Параметры:
  • obj- объект, создаваемый методом M.Marker
M.MarkerPopup({lat:{Lat},lon:{Lon},content:{html}}) Создание объекта маркера c окном текста на карту по указанным координатам Параметры:
  • Lat – параметр координаты
  • Lon – параметр координаты
  • Html – текст для отображения (возможна HTMLразметка)
addMarkerPopup({obj}); Добавления маркера на карту Параметры:
  • obj- объект, создаваемый методом M.MarkerPopup
M.Popup({lat:{Lat},lon:{Lon},content:{html}}) Создание объекта окна с текстом (указателя) на карте по указанным координатам Параметры:
  • Lat – параметр координаты
  • Lon – параметр координаты
  • Html – текст для отображения (возможна HTMLразметка)
addPopup({obj}) Добавления объекта окна с текстом (указателя) на карту Параметры:
  • obj- объект, создаваемый методом M.MarkerPopup
M.Circle({lat:{Lat},lon:{Lon},radius:{radius}}) Добавление окружности на крату Параметры:
  • Lat – параметр координаты
  • Lon – параметр координаты
  • radius – радиус окружности в точках
addCircle({obj}); Добавления окружности на карту Параметры:
  • obj- объект, создаваемый методом M.Circle
M.Polyline({coords: [{lat: {lat}, lon:{lon}}]},{color: '{color}') Создание объекта ломаной линии по нескольким точкам. Параметры:
  • Coords - массив координат точек, по которым строится линия
  • Lat - параметр координаты
  • Lon - параметр координаты
  • Color - цвет линии
addPolyline({obj}) Добавления объекта ломаной линии на карту Параметры:
  • obj- объект, создаваемый методом M.Polyline
M.Util.getUserLatLon(); Возвращает текущие геокоординаты пользователя функциями браузера. При невозможности получения координат будет возвращено значение bool(false).
setZoom(zoom:{zoom}) Приближение карты до необходимого уровня. Параметры:
  • zoom – Уровень приближения (5-18)
M.Event(action:{action},callback:{callback}) Добавляет событие на карту. Параметры:
  • action - событие, по которому выполнится действие
  • click - событие клика по карте
  • callback - функция обратного вызова. Будет вызвана после события {action}
addExt(EXT) Добавление на карту элемента управления:
  • Fullscreen - разворачивание карты на полный экран
  • ShowMe - определение координат пользователя и перенос фокуса карты на местоположение пользователя
  • Transport - отобажение остановок общественного транспорта
  • Photos - отображение фотографий мест. Внимание, сервис предоставляется через 3ю сторону. Если у вас ограниченный доступ в Интернет (гостевой доступ) - данный функционал работать не будет
  • Routes - прокладка маршрута
Ext.GeoEvent.setEvent(token:{token}) Отображение событий на карте, хранимых на сервере Map.BY. Параметры
  • token - уникальн уникальный номер события, вернутый API добавления события на карту

пример

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="map.css" />
    <link rel="stylesheet" href="http://map.by/js/fancyboxv2/source/jquery.fancybox.css" />
    <link rel="stylesheet" href="http://map.by/js/fancyboxv2/source/helpers/jquery.fancybox-buttons.css" />
    <link rel="stylesheet" href="http://map.by/js/jQueryContextMenu/src/jquery.contextMenu.css" />
    <script type="text/javascript" src="http://map.by/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://map.by/js/fancyboxv2/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="http://map.by/js/fancyboxv2/source/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script>
    <script type="text/javascript" src="http://map.by/js/jQueryContextMenu/src/jquery.contextMenu.js"></script>
    <script type="text/javascript" src="map-pack-v2.js"></script>
</head>
<body style="height:100%">
<div id="map" style="height:100%"></div>
<div id="panoramio" style="display:none"></div>
<script type="text/javascript">
 
    var map = new M.Map({id: 'map', apiKey: 1234567890});
 
    map.setView({lat: 53.8938, lon: 27.52541, zoom: 17});
 
    var marker = new M.Marker({lat: 53.9004949, lon: 27.5595474});
 
    map.addMarker(marker);
 
    map.removeLayer(marker);
 
    marker2 = new M.MarkerPopup({lat: 53.9004949, lon: 27.5595474, content: 'asdasdd'});
 
    map.addMarkerPopup(marker2);
 
    var popup = new M.Popup({lat: 53.9004949, lon: 27.5595474, content: 'asdasdd'});
 
    map.addPopup(popup);
 
    var circle = new M.Circle({lat: 53.9004949, lon: 27.5595474, radius: 10});
 
    map.addCircle(circle);
 
    var polyline = new M.Polyline({
        coords: [{lat: 53.8938, lon: 27.52541}, {lat: 52, lon: 26}, {lat: 51, lon: 25}]
    },
    {
        color: 'red'
    }
    );
 
    map.addPolyline(polyline);
 
    var polygon = new M.Polygon({
        coords: [{lat: 53.8938, lon: 27.52541}, {lat: 52, lon: 26}, {lat: 51, lon: 25}]
    });
 
    map.addPolygon(polygon);
 
    coords = M.Util.getUserLatLon(); //return user geo position (lat and lon)
 
    map.setZoom({zoom: 18});
 
    event = new M.Event({action: 'click', callback: function(e){alert(e.latlng)}});
 
    map.addEvent(event);
 
 
    map.addExt('Fullscreen');
 
    map.addExt('ShowMe');
 
    map.addExt('Transport');
 
    map.addExt('Photos');
 
    map.addExt('Routes');
 
    map.addExt('GeoEvent');
 
    map.Ext.GeoEvent.setEvent({token: 4512414856}); 
</script>
</body>
</html>
Личные инструменты
Пространства имён

Варианты
Действия
Навигация
Инструменты