Как во vuex передать инстанс яндекс.карты, чтобы в методах компонента Vue можно было по клику добавлять маркеры?

Question

[evlgromov]

Проинициализировал карту в хуке mounted.
Карта открывается и центрируется по местонахождению пользователя. Как мне получить инстанс карты, чтоб я мог в методах компонента Vue например по клику добавлять маркеры?
Вот код компонента карты:

<template>
  <div
      id="map"
      class="ymap-container"
      @click="onClick"
  ></div>
</template>

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

  export default {
    name: 'LocationMap',
    data() {
      return {
        name: '',
        coords: [],
        settings: {
          apiKey: '',
          lang: 'ru_RU',
          coordorder: 'latlong',
          version: '2.1'
        },
        myMap: {}
      }
    },
    methods: {
      onClick(e) {
        
      },
    },
    async mounted() {
      await loadYmap({...this.settings, debug: true})
      ymaps.ready(ymaps.geolocation.get()
        .then((res) => {
          const [long, lat] = res.geoObjects.position
          this.myMap = new ymaps.Map("map", {
            center: [long, lat],
            zoom: 7
          })
        })
        .catch(e => {
          console.log('Ошибка: ' + err)
        }))
    }
  }
</script>

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

Answer 1

[0xD34F]

Не нужно дёргать карту напрямую. Сделайте массив с данными маркеров, заполняйте его по клику, и на его основе создавайте экземпляры компонента маркера:

import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps';

components: {
  yandexMap,
  ymapMarker,
},
data: () => ({
  coords: null,
  markers: [],
  settings: { /* ... */ },
}),
methods: {
  onClick(e) {
    this.markers.push({
      id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
      coords: e.get('coords'),
    });
  },
},
async mounted() {
  await loadYmap({ ...this.settings, debug: true });

  ymaps.geolocation.get().then(res => {
    this.coords = res.geoObjects.position;
  });
},

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

https://jsfiddle.net/f65hraxk/

Comments

[evlgromov]

Спасибо Вам. Это то что надо.

[evlgromov]

0xD34F, приветствую. Можно вопрос в догонку?
Имеется компонент списка маркеров, при добавлении маркера в список, соответственно маркер появляется и на карте, благодаря Вам я это реализовал. Встал такой вопрос, как центрировать карту на выбранном маркере? Т.е. при клике на item в списке карта должна центрироваться на этом маркере. Опять же не могу получить инстанс карты, как к ней обратиться?
Чтоб не усложнять, допустим по клику на карте появляется маркер как в Вашем примере, как к событию onClick с добавлением маркера на карту добавить центрирование на месте клика?

[0xD34F]

evlgromov, не вижу, каким образом этот вопрос связан с исходным. Оформляйте новый.