Tispartaaaa
@Tispartaaaa
Начинающий фронтендер :)

Как связать элементы в списке с соответствующими им марками на yandex maps?

Доброго времени суток.

Помогите плз советом или решением прям)
В JS совсем зелёный, не могу решить описанную ниже задачу.

Есть вот эта страница.
Слева - список клиник . Справа - эти самые клиники на карте.
Я пытаюсь сделать так:

Нажимаем на клинику в списке слева - и на карте соответствующая клиника меняет цвет своей иконки (меняется путь к файлику с изображением).

В списке клиник у каждой из клиник есть data-атрибуты где написаны координаты клиники. Js забирает их и создаёт гео объебъекты.

Выложу сюда js.
(function ($) {
  $(document).ready(function() {
    var elementMap = document.getElementById('map-results');

    if (elementMap) {
      ymaps.ready(init);
    }

    function init() {
      var myMap = new ymaps.Map(elementMap, {
        center: [59.937204, 30.313636],
        zoom: 13
      });

      var myCollection = new ymaps.GeoObjectCollection(null, {
        iconLayout: 'default#image',
        iconImageHref: 'svg/map_icon.svg',
        iconImageSize: [30, 30],
        iconImageOffset: [0, 0]
      });

      $('.search__result .clinic-item__address').each(function() {
        var lat = $(this).attr('data-lat'),
        long = $(this).attr('data-long'),
        clinic = $(this).parents('.clinic-item');

        var geoObject = new ymaps.GeoObject({
          geometry: {
            type: "Point",
            coordinates: [lat, long]
          }
        });

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

          myCollection.each(function (geoObject) {
            geoObject.options.set({
              iconImageHref: 'svg/map_icon.svg'
            });
          });

          e.get('target').options.set({
            iconImageHref: 'svg/map_active.svg'
          });




          $('.clinic-item--active').removeClass('clinic-item--active');

          clinic.addClass('clinic-item--active');

          $('.search__result').animate({ scrollTop: $('.clinic-item--active').position().top}, 500);
        });

        myCollection.add(geoObject);
      });

      myMap.geoObjects.add(myCollection);

      myMap.setBounds(myCollection.getBounds(), {
        checkZoomRange : true,
        duration       : 500,
        zoomMargin     : 10
      });

      $('.search').on('click', '.clinic-item', function () {
        var item = $(this);

        if ( !item.hasClass('clinic-item--active') ) {
          var lat = item.find('.clinic-item__address').attr('data-lat'),
          long = item.find('.clinic-item__address').attr('data-long');

          $('.clinic-item--active').removeClass('clinic-item--active');
          item.addClass('clinic-item--active');
        }
      });
    };

    var elementMapClinic = document.getElementById('map');

    if (elementMapClinic) {
      ymaps.ready(initMap);
    }

    function initMap(){
      var lat = $('.clinic .clinic-item__address').attr('data-lat'),
      long = $('.clinic .clinic-item__address').attr('data-long'),
      myMap = new ymaps.Map(elementMapClinic, {
        center: [lat, long],
        zoom: 15
      });

      myPlacemark = new ymaps.Placemark([lat, long], {}, {
        iconLayout: 'default#image',
        iconImageHref: 'svg/map_active.svg',
        iconImageSize: [40, 40],
        iconImageOffset: [0, 0]
      });

      myMap.geoObjects.add(myPlacemark);
    };
  })
} ( jQuery ));


Yandex maps api читаю сейчас. Просто очень ограничен во времени. Пока что ничего путного не придумал.
Наверное нужно как то по клику на клинику искать геообъект с соответствующими координатами и ему менять изображение иконки. только не могу понять как это сделать.

Спасибо большое!!!
p.s. Сорян за простыню JS. Думаю нет особого смысла выкладывать этот код в песочницу :)
  • Вопрос задан
  • 990 просмотров
Решения вопроса 1
freeExec
@freeExec
Участник OpenStreetMap
Вы когда первый раз создаете маркеры по списку с координатами добавляйте туда ссылку на инстанс самого маркера. Тогда не придётся его искать и можно сразу менять его свойства.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы