Answer the question
In order to leave comments, you need to log in
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
Have you tried working with the map through this component?
Vue Yandex Maps
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question