Как сделать, чтобы кликнутый маркер имел цвет, отличный от остальных?

Question

[zlodiak]

Есть карта. При помощи левой кнопки мыши на ней можно ставить маркеры. Эти маркеры запоминаются в localStorage. При каждой загрузке карты маркеры берутся из localStorage и наносятся на карту.

JSFILLDE здесь.

Я повесил обработчик клика на маркер. После клика он становится зелёным. Но мне хотелось бы чтобы перед этой операцией происходил перебор всех существующих маркеров и покраска их в синий цвет. Вот кусок проблемного кода, в котором у меня не получается перебрать и перекрасить все маркеры:

collectionMarkers.events.add('click', function(e) {
        var target = e.get('target');
        var id = target.properties.get('id');
        console.log(id, target);   
        selectedMarker = id;
        console.log('selectedMarker', selectedMarker);       
         
        var markers = myMap.geoObjects.each((geoObject) => {
            console.log(geoObject.properties);
            console.log(geoObject.properties.get('name'));
            console.log(geoObject.properties.get('id'));
            geoObject.options.set({
                preset: 'islands#blueIcon',
            });
        });
        e.get('target').options.set('preset', 'islands#greenIcon');    
    });

В результате я хотел бы получить смену цвета маркеры, по которому кликнули, на зелёный.

Answer 1

[0xD34F]

Так:

коллекцияМаркеров.events.add('click', function(e) {
  e.get('currentTarget').each(function(n) {
    n.options.set('preset', n === this ? 'islands#greenIcon' : 'islands#blueIcon');
  }, e.get('target'));
});

или

let activeMarker = null;

// ...

коллекцияМаркеров.events.add('click', function(e) {
  if (activeMarker) {
    activeMarker.options.set('preset', 'islands#blueIcon');
  }

  activeMarker = e.get('target');
  activeMarker.options.set('preset', 'islands#greenIcon');
});

??

Comments

[zlodiak]

Да. Спасибо большое)