A
A
Ansom2021-01-22 15:25:55
Yandex maps
Ansom, 2021-01-22 15:25:55

How to work with Yandex maps in Vue 3?

Good afternoon.
I must say right away that I tried to google) and even found a similar question and answer on this forum, but it didn’t really help (
jsfiddle.net/h15gbmk0 - here is a sandbox, but in it the map is not called in the component and vue 2 and not 3. I
insert such an essence, for example the same example from the sandbox to the component and I get that the map is loading, but when it is moved, it throws an error and hangs .... In general, something obviously goes wrong)
I would be very grateful for the help of those who respond!
Below is the code for the component I'm experimenting with and what errors it causes.

<template>
  <button @click="setMarkers">Да</button>
  <div id="yandex-map"></div>
</template>
<script>
export default {
  data() {
    return {
      map: null,

    }
  },
  props:['center','zoom','coordinates'],

  created() {
    // Установить скрипты для использования яндекс карты
    let scriptYandexMap = document.createElement('script');
    scriptYandexMap.setAttribute('src', 'https://api-maps.yandex.ru/2.1/?lang=ru_RU');
    document.head.appendChild(scriptYandexMap);

    // Инициализировать яндекс карту
    scriptYandexMap.addEventListener("load", this.initializeYandexMap);
  },
  methods: {
    initializeYandexMap() {
      ymaps.ready(() => {
        this.map = new ymaps.Map("yandex-map", {
          center: this.center,
          zoom: this.zoom,
          controls: ['fullscreenControl'],
          searchControlProvider: 'yandex#search'
        });
        this.map.behaviors.disable('scrollZoom');
        console.log(this.map);
        //this.setMarkers();
        //this.coordinates.then(() => this.setMarkers());
      });
    },
    setMarkers() {
      for (let i = 0; i < this.coordinates.length; i++) {
        let placemark = new ymaps.Placemark(this.coordinates[i]);
        this.map.geoObjects.add(placemark);
      }
    }
  }
}
</script>
<style>
  body {
    margin: 0;
  }

  #yandex-map {
    width: 100vw;
    height: 100vh;
  }
</style>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
O
Orkhan Hasanli, 2021-01-24
@azerphoenix

Have you tried working with the map through this component?
Vue Yandex Maps

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question