@evlgromov

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

Проинициализировал карту в хуке 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>
  • Вопрос задан
  • 296 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Не нужно дёргать карту напрямую. Сделайте массив с данными маркеров, заполняйте его по клику, и на его основе создавайте экземпляры компонента маркера:

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://codesandbox.io/s/vue-template-forked-s17t3...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы