@Ansom

Как в Vue 3 работать с яндекс картами?

Добрый день.
Сразу скажу, гуглить пытался) и даже нашел подобный вопрос и ответ на данном форуме, но не особо помогло(
jsfiddle.net/h15gbmk0 - вот песочница, но в ней карта вызвана не в компоненте и vue 2 а не 3.
Суть такая вставляю например этот же пример из песочницы в компонент и получаю, что карта загружается, но при ее перемещение выкидывает ошибку и виснет.... В общем что то явно идет не так)
Буду очень благодарен за помощь тем кто откликнется!
Ниже код компонента, над которым экспериментирую я и какие это вызывает ошибки.

<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>
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ответы на вопрос 1
Пробовали работать с картой через этот компонент?
Vue Yandex Maps
Ответ написан
Ваш ответ на вопрос

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

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