
Приветствую всех, уважаемые харбажители!
В данном посте речь идет о том, как подружить карты яндекса и 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 проекта, а также на сайте с примерами.