У Яндекс карт есть vue либа "vue-yandex-maps".
Есть возможность получить доступ ко всему функционалу ymaps.
import { loadYmap } from 'vue-yandex-maps';
export default {
async mounted() {
const settings = { lang: 'en_US' };
await loadYmap(settings);
console.log(ymaps); // здесь доступен весь функционал ymaps
},
};
Но дальше из доки API по постройке тепловой карты, нужен плагин
Что бы дальше использовать:
ymaps.ready(['Heatmap']).then(async function init() {
let myMap = new ymaps.Map('map', {
center: [50.75532267470481, 4.6102387685483555],
zoom: 11,
controls: []
});
.......
Если я просто скачаю
плагин, открою и вставлю весь код из него перед ymaps.ready, то все работает и отображается - но это не правильно же.
Если весь код плагина помещаю в файл js и потом делаю import "/plugins/heatmap.js", то мне выдает ошибку:
Uncaught ReferenceError: ymaps is not defined
<anonymous> heatmap.js:1
js app.js:40
__webpack_require__ app.js:156
fn app.js:390
<anonymous> index.js:5
js app.js:19
__webpack_require__ app.js:156
fn app.js:390
<anonymous> App.vue:5
js app.js:84
__webpack_require__ app.js:156
fn app.js:390
<anonymous> App.vue:3
vue app.js:73
__webpack_require__ app.js:156
fn app.js:390
<anonymous> main.js:3
js app.js:51
__webpack_require__ app.js:156
__webpack_exports__ app.js:1278
O app.js:202
<anonymous> app.js:1279
<anonymous> app.js:1281
В самом плагине уже используется ymaps, но когда он импортируется, то ymaps еще существует же и соответственно отобразить не может.
Вот и вопрос как правильно импортировать и использовать плагин?