Angular-ymaps

Yandex Maps API as an Angular JS direcitive.

Это модуль для Angular JS, предназначенный для простого подключения и работы с Яндекс-картами. С его помощью можно вставлять Яндекс карту на страницу через html-тег, так же просто как img или button

Документация и пример использования

Подключение

• Скачать библиотеку или ее упакованную версию
• Подключить скрипт на страницу <script src="https://github.com/just-boris/angular-ymaps/raw/master/angular-ymaps.js"></script>
• Добавить модуль ymaps в зависимости своего angular-приложения angular.module('MyApp', ['ymaps'])
• Теперь можно использовать в HTML новые теги
  • <yandex-map> - Яндекс-карта
  • <ymap-marker> - маркер на карте, вставляется только внутрь тега <yandex-map>

Bower

Можно установить библиотеку из bower:

bower install angular-ymaps --save

API

Тег yandex-map:

<yandex-map center="map.center" zoom="map.zoom"></yandex-map>

Добавляет Яндекс-карту на страницу. Размеры карты определяются размерами элемента, их можно задать в css. При создании нужно указать два обязательных атрибута:

• center(Array) - массив из двух чисел, широта и долгота центра карты
• zoom(Number) - число, от 0 до 23, масштаб карты. Во избежание ошибок нужно задавать разрешенный масштаб для указанной области

Тег ymap-marker:

Может использоваться только внутри тега карты, добавляет на нее точку. Имеются следующие атрибуты

• coordinates(Array) - массив из двух чисел, широта и долгота маркера на карте (обязательный)
• index(String) - текст, который пишется на маркере
• properties(Object) - свойства метки, передаются в ymaps.GeoObject. Здесь может быть текст балуна, который открывается при нажатии на метку, или всплывающей при наведении подсказки. Подробнее - в документации Яндекс, описание параметра properties.

Глобальные настройки

Можно управлять видом и функциоальностью карты через свойства, вынесенные в константу ymapsConfig:

• apiUrl (String) - ссылка для загрузки API карт. Может переопределяться для загрузки другой версии. По умолчанию загружается 2.1-stable
• mapBehaviors (Array) - возможные поведения карты, массив ключей, которые принимает ymaps.map.behavior.Manager. Стандартное значение: ['default']
• mapControls (Array) - возможные элементы управления карты, массив ключей, которые принимает ymaps.map.control.Manager. Стандартное значение: ['default']
• markerOptions (Object) - опции, передаваемые ymaps.GeoObject, то есть настройки внешнего вида и поведения маркеров на карте. Стандартное значение: {preset: 'islands#darkgreenIcon'}
• clusterize (Boolean) – объединять ли маркеры в кластеры. По умолчанию false
• clusterOptions (Object) - опции кластера ymaps.Clusterer, применяются если включена кластеризация. Стандартное значение: {preset: 'islands#darkGreenClusterIcons'}
• fitMarkers (Boolean) - автоматически подстраивать видимую область и масштаб карты, чтобы было видно все точки на карте. Стандартное значение: true
• fitMarkersZoomMargin (Boolean) – отступ от границ карты при подстраивании масштаба под маркеры. Стандартное значение: 40 (px)