Как при клике добавить класс маркеру в Яндекс карте?

Рейтинг: 0Ответов: 1Опубликовано: 21.02.2023

Для интеграции карты в ReactJS проект юзаю https://pbe-react-yandex-maps.vercel.app/. Имеется кастомный маркер, созданный через templateLayoutFactory.createClass,

Код маркера

  const createIconLayout = ymaps?.templateLayoutFactory.createClass(
    `
          <div 
            class="placemark {% if properties.visited %}placemark-visited{% endif %}" 
            data-id="${hotel.id}" 
            id="placemark-${hotel.id}"
          >
            ${priceFormatter(hotel.price)}
          </div>
        `,
    {
      build: function () {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        createIconLayout?.superclass.build.call(this);

        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        // this.getData().geoObject.events.add('click', () => {
        //   console.log(this);
        // });

        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        this.getData().options.set('shape', {
          coordinates: [
            [-34, -25],
            [34, 5],
          ],
          type: 'Rectangle',
        });
      },
    }
  );

Как при клике по маркеру добавить дополнительный класс placemark-visited?

javascript reactjs yandex-maps-api
Источник: Stack Overflow на русском

Ответы

▲ 1

Можно попробовать добавить в функцию сборки прослушиватель событий к маркеру, который добавит дополнительный класс placemark-visited при клике по маркеру:

this.getData().geoObject.events.add('click', () => {
  const markerDomNode = document.getElementById(`placemark-${hotel.id}`);
  markerDomNode.classList.add('placemark-visited');
});