@evlgromov

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

Имеется главный компонент страницы:
<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>
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Свойство coords - переместить из компонента с картой в vuex. Тогда в компоненте элемента списка можно будет делать что-то вроде @click="$store.commit('setCoords', marker.coords)".
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
06 мар. 2021, в 02:23
120000 руб./за проект
06 мар. 2021, в 00:29
500 руб./за проект
05 мар. 2021, в 23:28
1200 руб./за проект