Клуб API Карт

Как изменить свое изображение метки при открытии/закрытии ее баллуна API 2.1

maximovpn
4 февраля 2014, 12:01

Добрый день!

На карту нанесено несколько меток Placemark  (вручную) и добавлены в кластеризатор. Все работает и устраивает.

Но, необходимо, чтобы при клике на метке и открытии ее баллуна, менялся внешний вид значка на картинку из URL. Как это сделать?

 

http://api.yandex.ru/maps/jsbox/event_rollover   

Этот пример перекрутил весь, сменить картинку по событию "клик" получается, а вот вернуть назад при закрытии балуна не вкурю как сделать....

И как это "правило" применить к множеству Placemark (около 100 шт. с разными индексами).

 

Вот ссылка для понимания http://aps-engineering.ru/portfolio

17 комментариев
Подписаться на комментарии к посту

Решение такое

clusterer.events.add(['balloonopen', 'balloonclose'], function (e) {

    var target = e.get('target');

    if (target.geometry && typeof target.getGeoObjects == 'undefined') {

       // мы имеем дело с геообъектом - выполняем нужные действия

    }

});

 

Единственный момент - сейчас у нас есть баг, который починится в ближайшем релизе - при закрытии балуна пользователем кидается 2 события balloonclose.

Спасибо за оперативность!

Не совсем понял куда прописывать URL графического файла 

Вместо опции preset нужно прописать 3 опции для иконки геообъекта

options.iconImageHref

Тип: String

 

URL графического файла иконки. Применяется только в комбинации с макетами (iconLayout) 'default#image' и 'default#imageWithContent'.
options.iconImageOffset

Тип: Number[]

 

Пиксельный сдвиг изображения иконки внутри родительского элемента.
options.iconImageSize

Тип: Number[]

 

Размер иконки в пикселях.

 

Это я понял, в своей же карте уже поменяно все, а вот тут

clusterer.events.add(['balloonopen', 'balloonclose'], function (e) {

    var target = e.get('target');

    if (target.geometry && typeof target.getGeoObjects == 'undefined') {

       // мы имеем дело с геообъектом - выполняем нужные действия

    }

});

я не увидел куда прописать, то, на что менять?

target.options.set(...)

?

Что не так? не дается мне никак  это ....

 

ymaps.ready(init);

function init() {

    var myMap = new ymaps.Map('map', {

            center: [55.755773, 37.617761],

            zoom: 9

        }),

        myPlacemark = new ymaps.Placemark([55.684758, 37.738521], {

        balloonContent: "пример пипки"            

        }, {

            preset: 'islands#yellowCircleDotIcon',

            balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу

            });    

    

 

    myMap.geoObjects.add(myPlacemark);

 

   myPlacemark.events

        .add(['balloonopen', 'balloonclose'], function (e) {

    var target = e.get('target');

    if (target.geometry && typeof target.getGeoObjects) {

       target.option.set('preset', 'islands#nightCircleDotIcon');

    }

}); 

 

}

target.option -> target.options

упс  )))) но при таком раскдаде, он меняется при открытии баллуна и забывает вернуться назад при закрытии....

Значит надо каждое событие слушать отдельно и в balloonopen делать set, а при balloonclose — unset

спасибо за оперативность :-D

опять 25 ..... пока нет кластера на карте, все работает http://jsfiddle.net/maximoff_pn/dv28n/  , как только появляются кластеры, ничего не работает. Пробовал и myMap.geoObjects.events и clusterer.events  http://jsfiddle.net/maximoff_pn/daAJ2/2/  по ссылкам мои коды ....

ошибочка.... http://jsfiddle.net/maximoff_pn/dv28n/1/  не работает только ели вместо метки стоит свой картинка.....   как бороться?

Дело в том что в АПИ это сделано "хитро"
Свойство preset имеет более низкий приоритет чем ключи стилей непосредственно задаваемые метке (типа iconImageHref, iconImageSIze, iconImageOffset)
Поэтому перед сменой preset надо им сделать unset,
либо проще и более правильный вариант - добавить в хранилище preset-ов свой ключ с нужными настройками и менять его.

Еще хитрость в том что этот же ключ надо добавить в properties чтобы иметь возможность его откуда-то взять когда надо вернуть его на место

Обновил ваш fiddle

И эта хитрость нигде не описана .... :) Спасибо за подсказку с примером, все сделал!

Работает как надо :)

Раз пошла такая пьянка, может подскажешь как:

- изменить цвет, прозрачность баллуна и цвет шрифта в нем?

- поставить вместо крестика на закрывание баллуна свой файлик с иконкой

- можно ли сделать, чтоб в правом углу баллуна отображались картинки из галереи Wordpress страницы на которую ведет ссылка из этого баллуна? Если нет, то хотя бы вручную можно в определенном месте баллуна вставить пару картинок ?  просвяти плиз темного :)

Это делается с помощью макетов

Можно посмотреть примеры на пользовательский макет балуна кластера

http://ymapsapi.ya.ru/replies.xml?item_no=1091

или геообъекта

http://ymapsapi.ya.ru/replies.xml?item_no=1034

не найду описания в документации ???