如何在组件 Vue 中初始化小部件? [英] How to initialize widget in component Vue?
问题描述
正如我在 HEAD 中写的手册中所描述的:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>然后在 App-component 中我做了:
<div id="应用程序"><img src="./assets/logo.png"><路由器视图></路由器视图><div id="map" style="width: 600px; height: 400px"></div></模板><脚本>导出默认{名称:'应用'，创建(){var map = new ymaps.Map("map", {中:[55.76, 37.64]，变焦:7});}}
因此在 chrome 中的 commandtool 中出现以下错误:
ymaps.Map 不是构造函数那么，如何初始化我想要的所有内容?
可能是在地图初始化代码运行时 api 尚未完全加载.您可以尝试将初始化代码包装在 ymaps.ready() 函数中.
出口默认{名称:'应用'，创建(){ymaps.ready(() => {const map = new window.ymaps.Map("map", {中:[55.76, 37.64]，变焦:7});})}}我没有在单文件组件中尝试过这个，但能够让它在 这里是一个简单的代码笔示例.
I want to add maps in my app on VueJS.
As it descriped in manual I wrote in HEAD:
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Then in App-component I did:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<div id="map" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
export default {
name: 'app',
created () {
var map = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
}
}
</script>
So in commandtool in chrome the following error:
ymaps.Map is not a constructor
So, how to initialize all what i want?
It's possible the api hasn't fully loaded when your map initialization code runs. You could try wrapping your initialization code in the ymaps.ready() function.
export default {
name: 'app',
created() {
ymaps.ready(() => {
const map = new window.ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 7
});
})
}
}
I haven't tried this in a single-file component but was able to get it to work in a simple codepen example here.
这篇关于如何在组件 Vue 中初始化小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
