0

Есть вопрос, как мне сделать так, чтобы при клике на метку список элементов, выведенный отдельно скроллился к нужному элементу (соответствующему). Это нужно так как список планируется в виде ограниченного по высоте блока поверх карты, а элементов будет много.

Вот пример - https://www.berryalloc.com/global/en/dealers

Тут список и точки «связаны»: кликая на метку скроллится к элементу внешнего списка, а кликая по элементу списка двигает к метке на карте и открывает балун

1 ответ 1

1

Скролл к элементу в списке по клику на метку

Для того, чтобы сопоставить выбранной метке нужный элемент списка, проставьте элементам дата аттрибут id, соответствующий id меток:

<ul class="list">
  <li class="element" data-id="1">г. Москва</li>
  <li class="element" data-id="2">г. Санкт-Петербург</li>
</ul>

Повесьте click-обработчик на метки на карте, в обработчике реализуйте скролл контейнера к нужному элементу: можете воспользоваться браузерным методом scroll или какой-нибудь сторонней библиотекой (например, jump.js). Должно выглядеть примерно так:

eventsGroup.add(['click'], event => {
  // Получаем id метки, по которой произошел клик
  const pinId = event.get('objectId');

  // Находим нужный элемент в списке по id
  const list = document.querySelector('.list');
  const targetLi = list.querySelector(`[data-id='${pinId}']`);

  // Скролл к нужному элементу
  jump(targetLi);
});

Про события на карте можно почитать в официальной документации API Яндекс.Карт

Выбор метки на карте по клику на элемент списка

Вешайте обработчик на список. Теперь по id, зашитому в data-атрибут элемента списка, нужно найти точку на карте и выделить ее, поменяв ее preset.

const list = document.querySelector('.list');

// Делегирование событий - вешаем один общий обработчик на весь список
list.addEventListener('click', function(e) {
  if (e.target && e.target.matches('li.element')) {
    const elementId = e.target.dataset.id;
    // Передаем id в метод перерисовки меток
    refreshObjects(elementId);
  }
});

// Метод для изменения внешнего вида меток
function refreshObjects(elementId) {
  // Перебираем все объекты на карте
  objectManager.objects.each(object => {
    const isActive = object.id === elementId;

    // Обновляем параметры метки по текущему id
    objectManager.objects.setObjectOptions(object.id, {
      // Меняем пресет метки: используйте нужные вам пресеты из вашего проекта
      preset: isActive ? 'active-preset' : 'default-preset'
    }
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.