如何在组件 Vue 中初始化小部件？

Question

我想 add maps 在我的 VueJS 应用中。

正如我在 HEAD 中写的手册中所述：

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

然后在 App-component 中我做了：

<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>

于是在commandtool中chrome出现如下错误：

ymaps.Map is not a constructor

那么，如何初始化所有我想要的东西？

Answer 1

我对 ymaps 一点都不熟悉，似乎也没有在 npm 中看到它，但这是这里发生的事情的要点。

将每个 .vue 文件视为一个完全独立的文件。它只能访问从 Vue 实例全局导入的东西（即来自 vuex 的 this.$store 就是一个例子。

所以要获得一个包，你必须导入它

<script>
import ymaps from 'whatever-this-package-is-named';

export default {
  name: 'app',
  created () {
    var map = new ymaps.Map("map", {
      center: [55.76, 37.64],
      zoom: 7
    });
  }
}
</script>

然后从 npm 安装它，这将允许您控制版本、捆绑和分发它。

Answer 2

您的地图初始化代码运行时，可能 api 尚未完全加载。您可以尝试将初始化代码包装在 ymaps.ready() 函数中。

export default {
  name: 'app',
  created() {
    ymaps.ready(() => {
      const map = new window.ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 7
      }); 
    })
  }
}

我还没有在单文件组件中尝试过这个，但能够让它在 a simple codepen example here 中工作。

如何在组件 Vue 中初始化小部件？

How to initialize widget in component Vue?

yandex-maps

vue.js

vue-component

vuejs2