Как центрировать карту на маркере по клику на item списка маркеров?

Question

[evlgromov]

Имеется главный компонент страницы:

<template>
  <div class="container">
    <div class="ymaps">
      <div class="ymaps__controls">
        <LocationAdd
        />
        <LocationList
            v-bind:markers="markers"
        />
      </div>
      <LocationMap
          v-bind:markers="markers"
      />
    </div>
  </div>
</template>

<script>
  import LocationList from '../components/LocationList'
  import LocationAdd from '../components/LocationAdd'
  import LocationMap from '../components/LocationMap'

  export default {
    components: {LocationMap, LocationAdd, LocationList},
    name: 'Location',
    computed: {
      markers() {
        return this.$store.getters['marker/getAllMarkers']
      }
    },
    mounted() {
      this.$store.dispatch('marker/getAllMarkers')
    },
    methods: {
      getCoords(data) {
        this.coords = data
      }
    }
  }
</script>

<style scoped>
  .ymaps {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
  }
  .ymaps__controls {
    width: 300px;
  }
</style>

Данный компонент содержит в себе компоненты:
- LocationAdd - для добавления маркера в список
- LocationList - для отображения списка добавленных маркеров, который в свою очередь содержит компонент LocationItem для отображения единицы списка, т.е. маркера.
- LocationMap - соответственно сама Яндекс.карта, по клику на которую карта центрируется на области нажатия.
Вопрос такой, как центрировать карту по клику на маркере в списке?
LocationItem выглядит так:

<template>
  <b-list-group-item
      class="row"
      v-on:click="showMarker"
  >
    <div class="marker">
      {{marker.name}}
      <div class="marker__group">
        <span class="marker__coords">{{marker.coords[0]}}, {{marker.coords[1]}}</span>
      </div>
    </div>
    <div class="btn-group">
      <b-button v-on:click="editMarker(marker)" class="btn" variant="success">&#9998;</b-button>
      <b-button v-on:click="deleteMarker" variant="danger">&times;</b-button>
    </div>
  </b-list-group-item>
</template>

<script>
  export default {
    props: {
      marker: {
        type: Object,
      }
    },
    methods: {
      editMarker(marker) {
        console.log(marker)
      },
      deleteMarker() {
        this.$store.dispatch('marker/deleteMarker', {
          id: this.marker._id
        })
      },
      showMarker(e) {

      }
    }
  }
</script>

<style scoped>
  .row {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }
  .marker {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .marker__coords {
    font-size: 12px;
  }
  .btn {
    display: inline-block;
  }
</style>

Я так понимаю, что нужно передать координаты в компонент LocationMap и каким то образом центрировать карту по этим координатам, но никак не могу. Сам компонент карты:

<template>
  <yandex-map
      v-if="coords"
      :coords="coords"
      :zoom="5"
      @click="onClick"
  >
    <ymap-marker
        v-for="n in markers"
        :key="n._id"
        :marker-id="n._id"
        :coords="n.coords"
    ></ymap-marker>
  </yandex-map>

</template>

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

  export default {
    props: ['markers'],
    components: {
      yandexMap,
      ymapMarker,
    },
    data: () => ({
      coords: null,
      settings: {
        apiKey: '7f037fcc-21f0-4c1b-ad6e-1f292ef45a2f',
        lang: 'ru_RU',
        coordorder: 'latlong',
        version: '2.1'
      },
    }),
    methods: {
      onClick(e) {
        this.$store.dispatch('marker/setCoords', {
          coords: e.get('coords')
        })
        this.coords = e.get('coords')
      },
    },
    async mounted() {
      await loadYmap({...this.settings, debug: true})

      ymaps.geolocation.get().then(res => {
        this.coords = res.geoObjects.position
      })
    }
  }
</script>

<style scoped>
  .ymap-container {
    width: 750px;
    height: 500px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
</style>

Answer 1

[0xD34F]

Свойство coords - переместить из компонента с картой в vuex. Тогда в компоненте элемента списка можно будет делать что-то вроде @click="$store.commit('setCoords', marker.coords)".

Comments

[evlgromov]

Да, спасибо. Как раз к этому иду.

[evlgromov]

0xD34F, подскажите пожалуйста. Получается так:
Карта рендерится, получая входящие параметры

<yandex-map
      v-if="coords"
      :coords="coords"
      :zoom="5"
      @click="onClick"
  >

Если coords брать из стора, а изначально коммитить в него текущее местоположение, то выходит куча ошибок, в которых присутствует даже ymaps is not defined. А если в карту передавать coords: this.coords, то все нормально и карта рендерится с определением текущего местонахождения, но как тогда передать сюда координаты из стора?

<yandex-map
      v-if="coords"
      :coords="coords"
      :zoom="5"
      @click="onClick"
  >

[0xD34F]

evlgromov, мне вам сказать нечего. Понятия не имею, как вы там пытаетесь передавать координаты из стора, что за "куча ошибок" и т.д. - сам я не ясновидящий, а вы эту информацию почему-то решили скрыть.

[evlgromov]

0xD34F, прошу прощения, я новичок, так все запутанно, что трудно даже сформулировать вопрос, во всяком случае Вы мне очень помогли и большое Вам спасибо. Без Вас бы я не справился. Отмечаю Ваш ответ решением, так как Вы подтолкнули к правильному решению. Решил задачу через $eventBus. Ещё раз спасибо.

[0xD34F]

так все запутанно, что трудно даже сформулировать вопрос

evlgromov, да вроде бы не очень запутанно: https://codesandbox.io/s/vue-template-forked-bihy0...

[evlgromov]

0xD34F, "да вроде бы не очень запутанно" сказал куратора тега Vue))
Спасибо