Добрый день. Есть яндекс карта апи 2.1 на сайте. 1 Вопрос: как при клике на определенный балун (т.е. их может быть много) выполнялся js-код? 2 Вопрос: как при клике на div менять пресет балуна (для того, чтобы он визуально менялся)? Исходный код:
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.755773, 37.617761],
zoom: 9
});
ymaps.option.presetStorage.add('my#icon', {
iconLayout: 'default#image', //Свое изображение метки
iconImageHref: 'img/location.svg', //URL файла с меткой
iconImageSize: [22, 28], //Размер изображения
iconImageOffset: [-11, -28] //Смещение ножки
});
ymaps.option.presetStorage.add('my#icon2', {
iconLayout: 'default#image', //Свое изображение метки
iconImageHref: 'img/location-active.svg', //URL файла с меткой
iconImageSize: [22, 28], //Размер изображения
iconImageOffset: [-11, -28] //Смещение ножки
});
var myPlacemark = new ymaps.Placemark([55.6, 37.7], {
balloonPanelMaxMapArea: 0,
balloonContentHeader: '<div class="online">Онлайн запись</div><div class="title">УЗ" Дорожная клиническая больница на станции Чита-2" ОАО "РЖД" стаци…</div><div class="place">Москва, Столярный переулок, дом 7, корпус 2</div><div class="line"><span class="ulica"><i class="orange"></i>Арбатская</span><span class="distance">0,3 км</span></div>',
balloonContentFooter: 'Пн. - Пт.: 9:00-21:00<br>Сб.: 10:00-18:00<br>Вс.: выходной',
preset: 'my#icon'
}, {
preset: 'my#icon',
});
var myPlacemark1 = new ymaps.Placemark([55.7, 37.8], {
balloonPanelMaxMapArea: 0,
balloonContentHeader: '<div class="online">Онлайн запись</div><div class="title">УЗ" Дорожная клиническая больница на станции Чита-2" ОАО "РЖД" стаци…</div><div class="place">Москва, Столярный переулок, дом 7, корпус 2</div><div class="line"><span class="ulica"><i class="orange"></i>Арбатская</span><span class="distance">0,3 км</span></div>',
balloonContentFooter: 'Пн. - Пт.: 9:00-21:00<br>Сб.: 10:00-18:00<br>Вс.: выходной',
preset: 'my#icon'
}, {
preset: 'my#icon',
});
// Создаем коллекцию, в которую будем добавлять метки
clusterer = new ymaps.Clusterer({
gridSize: 64,
clusterDisableClickZoom: false,
zoomMargin: [80,20,80,80],
preset:'islands#orangeClusterIcons'
});
//Добавляем метки в коллекцию геообъектов.
clusterer
.add(myPlacemark)
.add(myPlacemark1);
// Добавляем коллекцию геообъектов на карту.
myMap.geoObjects.add(clusterer);
clusterer.events
.add(['balloonopen', 'balloonclose'], function (e) {
var target = e.get('target');
if (target.geometry && typeof target.getGeoObjects) {
if(e.get('type') === 'balloonopen') {
target.options.set({
preset: 'my#icon2'
});
} else {
target.options
.set('preset', target.properties.get('preset'));
}
}
});
}