Клуб API Карт

Изменение стиля метки по клику

s.dilyaverov
3 сентября 2014, 13:19

Есть список элементов по которому формируются метки на карте, метки могут быть разного вида(метка со стилем из стандартного набора option.presetStorage, метка с кастомным цветом, метка с изображением(спрайт), тянущаяся метка с текстом). Сделал изменение стиля каждого вида метки при наведении на нее. Как задать метке другой стиль при клике на нее(стиль "активной" метки(без наведений)),  так чтобы стиль других меток возвращался в свое первичное состояние(с наведениями)?

 

  var list = $('#farmacy-list'),

        elem = list.find('.elem'),

        collection = new ymaps.GeoObjectCollection();

 

    elem.each(function() {

        var _t = $(this),

            type = _t.data('placemark'),

            name = _t.data('name'),

            coords = _t.data('coords');

 

        switch (type) {

            case 'pin':

                var placemark = new ymaps.Placemark(coords, {}, {

                    preset: 'islands#darkGreenIcon'

                });

                placemark.events

                    .add('mouseenter', function(e) {

                        e.get('target').options.set({

                            preset: 'islands#greenIcon'

                        });

                    })

                    .add('mouseleave', function(e) {

                        e.get('target').options.set({

                            preset: 'islands#darkGreenIcon'

                        });

                    });

                break;

            case 'promo':

                var placemark = new ymaps.Placemark(coords, {}, {

                    preset: 'islands#icon',

                    iconColor: '#eb9b17'

                });

                placemark.events

                    .add('mouseenter', function(e) {

                        e.get('target').options.set({

                            iconColor: '#ffa91a'

                        });

                    })

                    .add('mouseleave', function(e) {

                        e.get('target').options.set({

                            iconColor: '#eb9b17'

                        });

                    });

                break;

            case 'mini':

                var placemark = new ymaps.Placemark(coords, {}, {

                    iconLayout: 'default#image',

                    iconImageClipRect: [[0,0], [21,21]],

                    iconImageHref: 'img/pin_mini.png',

                    iconImageSize: [21, 21],

                    iconImageOffset: [-10, -10]

                });

                placemark.events

                    .add('mouseenter', function(e) {

                        e.get('target').options.set({

                            iconImageClipRect: [[0,21], [21,42]]

                        });

                    })

                    .add('mouseleave', function(e) {

                        e.get('target').options.set({

                            iconImageClipRect: [[0,0], [21,21]]

                        });

                    });

                break;

            case 'pin-text':

                var placemark = new ymaps.Placemark(coords, {

                    iconContent: name

                }, {

                    preset: 'islands#darkGreenStretchyIcon'

                });

                placemark.events

                    .add('mouseenter', function(e) {

                        e.get('target').options.set({

                            preset: 'islands#greenStretchyIcon'

                        });

                    })

                    .add('mouseleave', function(e) {

                        e.get('target').options.set({

                            preset: 'islands#darkGreenStretchyIcon'

                        });

                    });

                break;

        }

 

        collection.add(placemark);

 

    });

 

    map.geoObjects.add(collection);

    map.setBounds(map.geoObjects.getBounds());

 

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

При создании поста надо указывать используемую версию АПИ, и убирать код под кат – кнопка "врезка"

Чтото у вас тут адский копипаст.

1. Используйте switch только для создания набора опций (но не для создания меток и обработчиков событий)

2. Не надо вешать обработчики событий на каждый геообъект, используйте eventDelegation

3. Храните 2 типа объектов опций в данных геообъекта (поле properties, 2 параметр в конструкторе ymaps.Placemark) и преключайтесь между ними

 

Примерно так:

elem.each(function() {

...

 

var activeOptions, defaultOptions;

switch(type) {

  case 'pin':

    activeOptions = {

      preset: 'islands#darkGreenIcon'

    };

    defaultOptions = {

      preset: 'islands#greenIcon'

    };

  break;

  ...

}

collection.add(new ymaps.Placemark(coords, {

  iconContent: name,

  defaultOptions: defaultOptions,

  activeOptions: activeOptions

}, defaultOptions));

});

map.geoObjects.add(collection);

map.setBounds(map.geoObjects.getBounds());

// Навешиваем один обработчик на коллекцию (event delegation)

collection.events.add('click', function (e) {

  // placemark на который кликнули

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

  // Выставляем ему опции типа "active"

  activeGeoObject.options.set(activeGeoObject.properties.get('activeOptions'));

  // остальным выставляем опции типа default

  collection.each(function (geoObject) {

    if(geoObject !== activeGeoObject) {

      geoObject.options.set(geoObject.properties.get('defaultOptions'));

    }

  });

});