yaMap Модуль для легкой работы с Яндекс картами в приложениях AngularJS.
В настоящий момент поддерживаются 2 версии яндекс карт, 2.0 и 2.1.
Добавьте ссылку на файл ya-map-2.1.js или ya-map-2.0.js, в зависимости от требуемой версии, в файл вашего главного представления:
<script src="https://github.com/tulov/angular-yandex-map/raw/master/js/ya-map-2.1.js"></script>
Задайте для вашего приложения зависимость от модуля yaMap:
var app = angular.module('myApp', ['yaMap']);
Задайте предпочитаемый язык и расположение коодинат в массиве, изменив при необходимости значения в yaMapSettings
. В версии 2.1 yaMapSettings
является провайдером, и его опции можно устанавливать через app.config
используя методы setLanguage
,setOrder
.
Не забудьте установить размеры для контейнера карты, иначе ничего не увидите.
Практически все примеры из песочницы яндекс карт воспроизведены на демонстрационной странице. Если примеры не воспроизведены, скорее всего задачи примера решаются гораздо проще средствами angular. Например, отображение меток в зависимости от каких либо параметров легко реализовать используя фильтры.
В каталоге example содержаться исходные коды примеров, разбитые по версиям API Yandex map. Если вы хотите запустить их на локальном компьютере (все равно требуется подключение к интернет для работы с картами), вам нужно сделать следующее:
1 запустить bower install в корневой папке проекта
2 запустить node web-server.js находясь в папке с примерами.
3 ввести в браузере: localhost: 8000
Реализована поддержка для всех событий. Чтобы подписаться на любое событие нужно определить атрибут с ya-event[-object]-eventname
, где вместо eventname
нужно подставить имя события, а вместо object
, если необходимо, то подставить имя свойства, на событие которого подписываемся. Например ya-event-click
- для подписки на событие click
, или ya-event-geo-objects-add
- для подписки на событие add
для map.geoObjects
.
Работать с ними нужно так же, как и с встроенными директивами событий, такими как ng-click
.
Чтобы получить родной объект события используйте $event
. Получить объект, породивший событие можно через $event.get('target')
Соответственно события нужно определять в той директиве, к которой они относятся, например события карты в yaMap
.
Представляет карту на вашей странице. Именно в ней должны располагаться практически все остальные директивы.
Атрибуты:
ya-center
- выражение, которое должно возвращать массив координат, или строку адреса. Если не задан, тогда определяется текущее местоположение пользователя и используется в качестве центра.ya-zoom
- массштаб карты, по умолчанию 0. Диапазон от 0-23 включительно. 0 самый мелкий (вся земля).ya-controls
- (версия 2.1) задает контролы на карте. Если контролы не нужны ya-controls=""
. Если не задан, тогда отображаются контролы по умолчанию.ya-type
- тип карты, возможные значения:
yandex#map (схема) - по умолчанию;
yandex#satellite (спутник);
yandex#hybrid (гибрид);
yandex#publicMap (народная карта);
yandex#publicMapHybrid (гибрид народной карты)
ya-behaviors
- поведения карты, задается в виде строки с разделительным пробелом между значениями. По умолчанию - default
. Чтобы удалить какие-либо поведения, нужно поставить перед их именем знак "-". Доступные значения:
"default" — короткий синоним для включения/отключения поведений карты по умолчанию:
для настольных браузеров - "drag", "dblClickZoom", "rightMouseButtonMagnifier",
для мобильных - "drag", "dblClickZoom" и "multiTouch"
"drag" — перемещание карты при нажатой левой кнопке мыши либо одиночным касанием;
"scrollZoom" — изменение масштаба колесом мыши
"dblClickZoom" — масштабирование карты двойным щелчком кнопки мыши
"multiTouch" — масштабирование карты двойным касанием (например, пальцами на сенсорном экране)
"rightMouseButtonMagnifier" — увеличение области, выделенной правой кнопкой мыши (только для настольных браузеров)
"leftMouseButtonMagnifier" — увеличение области, выделенной левой кнопкой мыши либо одиночным касанием
"ruler" — измерение расстояния
"routeEditor" — редактор маршрутов
ya-options
- опции карты. При задании опции projection
используется следующий формат:
projection:{type:'Cartesian', bounds:[[-1, -1],[1, 1]]}
, где type
- задает класс для создания проекции, а bounds
- координаты ограничивающего прямоугольника проекции. Остальные опции задаются как обычно.
ya-before-init
- задает функцию, которая будет выполнена после подготовки api карт, но до создания самой карты.
ya-after-init
- задает функцию, которая будет выполнена после создания объекта карты. Чтобы получить сам объект карты,используйте $target
.Представляет набор элементов управления на карте. Обязательно должна находится в yaMap.
Возможные атрибуты:
ya-name
- обязательный. Задает имя контрола для отображения. Доступные значения: 'zoomControl'
,'typeSelector'
,'mapTools'
,'scaleLine'
,'miniMap'
,'searchControl'
, 'trafficControl'
и 'smallZoomControl'
.ya-options
- выражение, которое должно возвращать объект с настройками для контрола. По умолчанию не установлено.ya-params
- параметры создания контрола. по умолчанию не установлены.ya-after-init
- задает функцию, которая будет выполнена после создания объекта. Чтобы получить сам объект,используйте $target
.Представляет элемент управления на карте. В версии 2.0 должна стоять внутри yaToolbar
, в 2.1 внутри yaMap
.
Атрибуты:
ya-type
- тип создаваемого элемента управления.ya-params
- параметры элемента управленияya-after-init
- задает функцию, которая будет выполнена после создания объекта. Чтобы получить сам объект,используйте $target
.представляет коллекцию гео.объектов. Должна находиться внутри yaMap
.
Атрибуты:
ya-options
- задает настройки отображения объектов для всей коллекции. По умолчанию {}
.ya-show-all
- подстраивать масштаб карты и ее центр при первом отображении, для того чтобы отображались все доступные гео.объекты. По умолчанию: false
ya-after-init
- задает функцию, которая будет выполнена после создания объекта. Чтобы получить сам объект,используйте $target
.представляет гео. объект карты. Должна стоять в yaMap
или yaCollection
, или yaCluster
.
Атрибуты:
ya-source
- задает источник данных для гео. объекта.ya-options
- задает настройки отображения для конкретного гео. объекта.ya-edit
- если задан, переводит объект в режим редактированияya-draw
- если задан, переводит объект в режим рисования.ya-show-balloon
- выражение, если оно возвращает true, то балун будет открыт, иначе закрыт.ya-after-init
- задает функцию, которая будет выполнена после создания объекта. Чтобы получить сам объект,используйте $target
.Представляет собой картиночный слой карты. Должна находиться в yaMap.
Имеет атрибуты:
ya-url-template
- шаблон URL тайлов картиночного слоя. Обязательный атрибутya-options
- настройка отображения слоя на карте. Не обязательный атрибут.Представляет собой активный слой карты. Должна находиться в yaMap.
Имеет атрибуты:
ya-url-template
- Шаблон URL для данных активных областей. Обязательный атрибут.ya-key-template
- Шаблон callback-функции, в которую сервер будет оборачивать данные тайла. Обязательный атрибут.ya-options
- настройки отображения слоя на карте. Не обязательный атрибут.Представляет кластеризатор карты. Должна находиться в yaMap
.
Имеет атрибуты:
ya-options
- задает опции для кластера.ya-after-init
- задает функцию, которая будет выполнена после создания объекта. Чтобы получить сам объект,используйте $target
.Представляет собой HTML шаблон, который должен использоваться элементами карты. Должна определяться до использования соответствующего шаблона.
Имеет атрибуты:
ya-key
- ключ для дальнейшего обращения к шаблонуya-overrides
- объект, который задает переопределяемые функции.Представляет собой перетаскиваемый на карту элемент управления.