Добрый день.
Сразу скажу, гуглить пытался) и даже нашел подобный вопрос и ответ на данном форуме, но не особо помогло(
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>
Средний
Средний
Простой