2

我想在 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>

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

ymaps.Map is not a constructor

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

4

2 回答 2

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
      }); 
    })
  }
}

我没有在单文件组件中尝试过这个，但是能够在一个简单的 codepen 示例中让它工作在这里。

于 2017-03-01T16:22:26.643 回答
0

我对 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 安装它，这将允许您控制版本、捆绑和分发它。

于 2017-02-28T12:20:05.890 回答