Как получить yandex marker в vue-yandex-maps?

Question

[Дима Паутов]

Столкнулся с такой проблемой, использую у себя для работы с yandex картой компонент vue-yandex-maps

Так выглядит вывод карты и её меток:

<template>
  <ul>
    <li
      v-for="object in objects"
      :key="object.id"
      @mouseleave="onMouseleaveObject"
      @mouseenter="onMouseenterObject"
    >
      {{ object.title }}
    </li>
  </ul>

  <yandex-map
    ref="map"
    :settings="map.settings"
    :controls="map.controls"
    :coords="mapCoords"
    :show-all-markers="true"
  >
    <ymap-marker
      v-for="marker in markers"
      :key="marker.id"
      :marker-id="marker.id"
      :coords="marker.coords"
      :hint-content="marker.title"
      :icon="map.markerIcon"
      @mouseenter="onMouseenterMarker"
      @mouseleave="onMouseleaveMarker"
    />
  </yandex-map>
</template>

<script>
  import { yandexMap, ymapMarker } from 'vue-yandex-maps';

  const MAP_MARKER_DEFAULT = require('@/assets/images/map-markers/marker-circle.svg');
  const MAP_MARKER_ACTIVE = require('@/assets/images/map-markers/marker-circle-active.svg');

  export default {
    components: {
      yandexMap,
      ymapMarker
    },
    data: () => ({
      map: {
        settings: {
          apiKey: 'тут ключ',
          lang: 'ru_RU',
          coordorder: 'latlong',
          version: '2.1'
        },
        controls: [],
        markerIcon: {
          layout: 'default#image',
          imageHref: MAP_MARKER_DEFAULT,
          imageSize: [48, 48],
          imageOffset: [-24, -48]
        }
      }
    },
    methods: {
      onMouseenterObject (id) {
        console.log('onMouseenterObject');
      },
      onMouseleaveObject () {
        console.log('onMouseleaveObject');
      },
      onMouseenterMarker (event) {
        const marker = event.get('target');

        this.setMarkerIcon(marker, MAP_MARKER_ACTIVE);
      },
      onMouseleaveMarker (event) {
        const marker = event.get('target');

        this.setMarkerIcon(marker, MAP_MARKER_DEFAULT);
      },
      setMarkerIcon (marker, icon) {
        marker.options.set('iconImageHref', icon);
      }
    }
  };
</script>

В чём проблема, в данный момент, мне нужно, при наведении мышкой на элемент списка подсвечивать маркер на карте.
Для самих меток на карте и наведении на них, я вроде как сделал. А вот со списком у меня проблема. Несколько часов гуглю, рою доку, но никак не пойму, как мне обратиться к маркеру.

Пробовал разными способами.
В доке вроде как можно получить маркеры, через свойство geoObjects и у него использовать метод get, который, судя по доке, принимает аргумент в виде индекса маркера.
В методе onMouseleaveObject пробовал так:

onMouseleaveObject (index) { // В шаблоне я передавал index
  const marker = this.$refs.map.mayMap.geoObjects.get(index);

  console.log(marker); // undefined

  this.setMarkerIcon(marker, MAP_MARKER_ACTIVE);
}

Толку никакого. Подскажите пожалуйста, как решить задачку?

Answer 1

[0xD34F]

Не надо манипулировать маркерами напрямую. Храните в данных компонента индекс активного маркера, по событиям enter/leave устанавливайте его значение, в зависимости от которого передавайте в экземпляры компонента маркера картинки иконок:

data: () => ({
  map: {
    activeMarkerIndex: null,
    markerIconImages: [ MAP_MARKER_DEFAULT, MAP_MARKER_ACTIVE ],
    ...

<ymap-marker
  v-for="(n, i) in markers"
  :icon="{
    ...map.markerIcon,
    imageHref: map.markerIconImages[+(map.activeMarkerIndex === i)],
  }"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

<li
  v-for="(n, i) in objects"
  @mouseenter="map.activeMarkerIndex = i"
  @mouseleave="map.activeMarkerIndex = null"
  ...

https://jsfiddle.net/bw5eym2n/