JavaScript
Angular
October 2013 28

Яндекс карты для angular.js

From Sandbox
image

Приветствую всех, уважаемые харбажители!
В данном посте речь идет о том, как подружить карты яндекса и javascript framework angular.js для их совместной работы. Можно, конечно, использовать и google map, но для стран СНГ их качество оставляет желать лучшего.
Немного погуглив, и не найдя готового решения, пришлось писать свое. Кому интересно, добро пожаловать под кат.

Репозиторий git Demo
В результате публикации этой статьи в первый раз, мною были получены ценные конструктивные замечания, кои вы можете видеть снизу, в комментариях. Спасибо всем, кто готов был учить меня уму разуму, а что из этого получилось, сейчас мы и увидим.
Начнем с самого простого, стоит задача отобразить карту. Решение:
<ya-map ya-zoom="8" ya-center="[37.64,55.76]"></ya-map>

При этом, если не задать атрибут ya-center, центр карты будет выставлен в текущее местоположение пользователя.
Добавить гео. объекты на карту можно 2 способами, первый — непосредственное добавление, второй — добавление в коллекцию гео. объектов. Коллекции используются для объединения гео. объектов в группы, с целью дальнейших манипуляций с ними в сходной манере. Коллекции бывают двух видов: обычная коллекция и кластеризатор. Обычных коллекций на карте может быть сколько угодно, а вот кластеризатор может быть только один, и принимает в себя только точки. Ну хватит теории, перейдем к коду. Добавление гео. объекта непосредственно на карту:
<ya-map ya-zoom="10" ya-center="[37.64,55.76]">
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
</ya-map>

$scope.geoObjects=
    {
        geometry: {
            type: 'Circle',
            coordinates: [37.60,55.76],
            radius: 10000
        },
        properties: {
            balloonContent: "Радиус круга - 10 км",
            hintContent: "Подвинь меня"
        }
    };

Добавление гео. объекта в коллекцию:
<ya-map ya-zoom="10" ya-center="[37.64,55.76]">
    <ya-collection>
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
    <ya-collection>
</ya-map>

Добавление точки в кластеризатор:
<ya-map ya-zoom="10" ya-center="[37.64,55.76]">
    <ya-cluster>
        <ya-geo-object ya-source="geoObject"></ya-geo-object>
    <ya-cluster>
</ya-map>

Понятно, что geoObject теперь должен указывать на точку.
Реализована поддержка всех событий карты. Чтобы подписаться на событие используется конструкция ya-event[-target]-eventname. Здесь ya-event — префикс, определяющий что это подписка на событие, target — если задан, то свойство внутри элемента, на событие которого мы хотим подписаться, eventname — имя события, на которое подписываемся. В обработчик события передается родной объект событий яндекс карт, через параметр $event. Получить объект, возбудивший событие можно через $event.get('target'). Итак, давайте подпишемся на событие click карты и на событие add свойства карты geoObjects.
<ya-map ya-zoom="10" ya-event-click="click($event)" ya-event-geo-objects-add="added($event)"></ya-map>

$scope.click = function(e){
    //что-то делаем при клике на карте
};
$scope.added=function(e){
    //что-то делаем при добавлении объекта на карту
};

Добавление элементов управления на карту производится так же просто. Стандартные элементы управления добавляются с помощью директивы yaToolbar, а если вы хотите создать собственную панель (ну или модернизировать имеющуюся), тогда внутрь ее помещаются директивы yaControl. Пример:
<ya-map ya-zoom="8" ya-center="[37.64,55.76]">
        <!-- стандартные панели управления -->
        <ya-toolbar ya-name="zoomControl"></ya-toolbar>
        <!-- собственные элементы управления -->
        <ya-toolbar ya-name="toolBar">
            <ya-control ya-type="button" ya-params="Свойство: balloonHeader"
                    ya-event-select="balloonHeader($event)"
                    ya-event-deselect="balloonHeader($event)"></ya-control>
        </ya-toolbar>
    </ya-map>

Кроме всего описанного, есть возможность создавать собственные карты, использовать шаблоны для нестандартных элементов управления, и других объектов на карте и еще много чего.
Больше информации вы можете получить на github проекта, а также на сайте с примерами.
+13
18.2k 126
Comments 26