tulov / angular-yandex-map

AngularJS directive to work with Yandex maps
173 stars 58 forks source link

yaMap

yaMap Модуль для легкой работы с Яндекс картами в приложениях AngularJS.

Версии Яндекс карт

В настоящий момент поддерживаются 2 версии яндекс карт, 2.0 и 2.1.

Установка

  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>
  2. Задайте для вашего приложения зависимость от модуля yaMap:

    var app = angular.module('myApp', ['yaMap']);
  3. Задайте предпочитаемый язык и расположение коодинат в массиве, изменив при необходимости значения в yaMapSettings. В версии 2.1 yaMapSettings является провайдером, и его опции можно устанавливать через app.config используя методы setLanguage,setOrder.

  4. Не забудьте установить размеры для контейнера карты, иначе ничего не увидите.

Примеры

Практически все примеры из песочницы яндекс карт воспроизведены на демонстрационной странице. Если примеры не воспроизведены, скорее всего задачи примера решаются гораздо проще средствами 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.

Директива yaMap (обе версии)

Представляет карту на вашей странице. Именно в ней должны располагаться практически все остальные директивы.

Атрибуты:

Директива yaToolbar (только в версии 2.0)

Представляет набор элементов управления на карте. Обязательно должна находится в yaMap.

Возможные атрибуты:

Директива yaControl (в обеих версиях)

Представляет элемент управления на карте. В версии 2.0 должна стоять внутри yaToolbar, в 2.1 внутри yaMap.

Атрибуты:

Директива yaCollection (в обеих версиях)

представляет коллекцию гео.объектов. Должна находиться внутри yaMap.

Атрибуты:

Директиа yaGeoObject (в обеих версиях)

представляет гео. объект карты. Должна стоять в yaMap или yaCollection, или yaCluster.

Атрибуты:

Директива yaImageLayer (в обеих версиях)

Представляет собой картиночный слой карты. Должна находиться в yaMap.

Имеет атрибуты:

Директива yaHotspotLayer (в обеих версиях)

Представляет собой активный слой карты. Должна находиться в yaMap.

Имеет атрибуты:

Директива yaCluster (в обеих версиях)

Представляет кластеризатор карты. Должна находиться в yaMap.

Имеет атрибуты:

Директива yaTemplateLayout (в обеих версиях)

Представляет собой HTML шаблон, который должен использоваться элементами карты. Должна определяться до использования соответствующего шаблона.

Имеет атрибуты:

Директива yaDragger (в версии 2.1)

Представляет собой перетаскиваемый на карту элемент управления.