Question

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

正如我在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>

因此在chrome中的commandtool中出现以下错误：

ymaps.Map is not a constructor

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

Answer 1

当您的地图初始化代码运行时，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中使用它。

Answer 2

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

将每个.vue文件视为完全自包含的文件。它只能从Vue实例访问全局导入的东西（即这个。来自vuex的$ 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安装它，这将允许您控制版本，捆绑和分发它。

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

2 个答案: