Получить доступ к ymap-marker вне карты

[igorwebtech]

Добрый день! Есть массив точек для карты, из этого массива также формируется список из элементов рядом с картой, каждый элемент содержит цену, координаты, название) , нужно при наведении на элемент списка менять фон в contentLayout (за основу взят пример ) Поведение хочется добиться такого Пример поведения

[Stopy]

@igorwebtech Как вариант (у себя в проекте мы реализовали так), можно задавать фон у элемента внутри contentLayout, и его уже модифицировать, добавляя класс при клике и т.д. P.S. Все события нужно будет вешать через JS api, т.к. Vue не инициализирован на этом html коде, а при уничтожении компонента не забудьте отписаться

[igorwebtech]

@igorwebtech Как вариант (у себя в проекте мы реализовали так), можно задавать фон у элемента внутри contentLayout, и его уже модифицировать, добавляя класс при клике и т.д. P.S. Все события нужно будет вешать через JS api, т.к. Vue не инициализирован на этом html коде, а при уничтожении компонента не забудьте отписаться

Добрый день! А как можно именно сопоставить списки те как определить что наведя на пункт списка вне картты, мы получаем доступ к точке на карте? (как открыть баллун не проблема, а получить доступ)

[dsvitnev]

Добрый день! Есть массив точек для карты, из этого массива также формируется список из элементов рядом с картой, каждый элемент содержит цену, координаты, название) , нужно при наведении на элемент списка менять фон в contentLayout (за основу взят пример ) Поведение хочется добиться такого Пример поведения

Это сложная и нетривиальная задача, по крайней мере, в рамках API Я.Карт.

1. Вам в вашем компоненте, где размещается компонент яндекс карты, нужно в data() завести реактивное свойство (например, displayedItems) которое будет являтся массивом айдишников ваших элементов, изначально пустым
2. Маркеры на карте вам нужно создавать в коллбэке для события map-was-initialized при помощи new Placemark(...), а не в слоте компонента карты
3. В конструкторе ваших маркеров вам нужно для каждого маркера положить в properties его id, связывающий его с свойством id объекта данных для конкретного элемента из списка элементов
4. Вам нужно для ваших маркеров создать кастомный layout при помощи templateLayoutFactory.createClass(...), где первым аргументом, куда вы передадите строку, которая будет являться html-макетом вашего layout, в корневом элементе макета вы должны будете указать аттрибут id следующим образом: ... createClass(<div class="marker" id="marker_{{ properties.id }}"> ... </div>, ...
5. Вам нужно будет переопределить методы build() и clear() у вашего layout, где в build вы будете получать айдишник вашего маркера при помощи this.getData().geoObject.properties.get("id") и пушить его в ваш displayedItems массив, а в clear будете удалять его из массива (не забудьте в build в начале вызвать родительский конструктор, а в clear - в конце)
6. Теперь вам нужно повесить watcher на ваш displayedItems, и при его изменения перерендеривать список элементов
7. Для компонента элемента на нативное событие mouseenter повесьте метод, который будет через querySelector или getElementById находить в DOM соответствуюший айдишнику элемента маркер и добавлять ему класс, который будет менять css маркера как вам нужно, ну а на событие mouseenter - убирать этот класс
8. ?????
9. Вы великолепны! Теперь вам придётся обратить внимание на тот факт, что кластеризацию использовать не получится, потому что движок Я.Карт не отрендеривает кластеризованные элементы, и, следовательно, их нет в DOM и к ним нельзя будет обратится. И вам придётся либо отказаться от кластеризации и использовать ObjectManager, но тогда не получится навешивать события на ваши маркеры, например, чтобы при клике на него вас редиректило на страницу со связанным элементом из списка, либо придумывать как на лету при наведении на элемент списка доставать конкретный маркер из списка, а это уже совсем другая история...