Раз уж я вспомнил про подключение Highcharts, то и YandexMaps не обойдём стороной, ведь их подключение у новичков вроде меня может вызвать часы боли. На самом деле тут всё ещё проще. Самым рабочим вариантом оказалось подключить яндекс карты напрямую на нужной странице. Так как мне нужно использовать их ровно в одном месте - даже не стал запариваться с выносом API в константы. Просто в pages (Nuxt3) создал страницу ymindex.vue и использовал в ней следующий код: <script setup lang="ts"> import { onMounted } from 'vue' import { useHead } from '#imports' useHead({ script: [ { src: 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=КЛЮЧ_АПИ', type: 'text/javascript' } ] }) function waitForYmaps(): Promise<typeof ymaps> { return new Promise((resolve, reject) => { const interval = setInterval(() => { if (window.ymaps) { clearInterval(interval) resolve(window.ymaps) } }, 100) setTimeout(() => { clearInterval(interval) reject(new Error('Yandex Maps API load ti
Раз уж я вспомнил про подключение Highcharts, то и YandexMaps не обойдём стороной, ведь их подключение у новичков вроде меня может вызвать часы боли.
На самом деле тут всё ещё проще. Самым рабочим вариантом оказалось подключить яндекс карты напрямую на нужной странице. Так как мне нужно использовать их ровно в одном месте - даже не стал запариваться с выносом API в константы. Просто в pages (Nuxt3) создал страницу ymindex.vue и использовал в ней следующий код:
<script setup lang="ts">
import { onMounted } from 'vue'
import { useHead } from '#imports'
useHead({
script: [
{
src: 'https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=КЛЮЧ_АПИ',
type: 'text/javascript'
}
]
})
function waitForYmaps(): Promise<typeof ymaps> {
return new Promise((resolve, reject) => {
const interval = setInterval(() => {
if (window.ymaps) {
clearInterval(interval)
resolve(window.ymaps)
}
}, 100)
setTimeout(() => {
clearInterval(interval)
reject(new Error('Yandex Maps API load timeout'))
}, 10000) // таймаут 10 секунд
})
}
onMounted(async () => {
try {
const ymaps = await waitForYmaps()
ymaps.ready(() => {
const map = new ymaps.Map('map', {
center: [55.76, 37.64], // Москва
zoom: 10,
})
const placemark = new ymaps.Placemark([55.76, 37.64], {
balloonContent: 'Москва, Кремль',
})
map.geoObjects.add(placemark)
})
} catch (error) {
console.error('Yandex Maps API failed to load', error)
}
})
</script>
<template>
<div id="map" style="width: 100%; height: 500px;"></div>
</template>
Здесь мы напрямую подключаем скрипт YandexMaps с версией API 2.1 и работаем уже с апи карт.
На выходе получился вот такой результат:
Надеюсь, кому-то будет полезно)