Question

我正在尝试导入和使用Vue.js应用程序中的节点模块“ azure-maps-control”，但是在尝试实例化地图时遇到未定义的错误。

使用npm安装azure-maps-control之后，我已经尝试了多种导入节点模块的方法：

使用Vue.use(require('azure-maps-control'))
尝试导入Vue文件本身import atlas from azure-maps-control

无论我如何导入，当我尝试实例化地图时，atlas变量始终是未定义的。这是新的Vue.js应用程序中的一些文件。

Main.js：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(require('azure-maps-control'))

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue：

<template>
  <div id="app">
    <div id='myMap'/>
    <input value="text" type="button" v-on:click="initMap"/>
  </div>
</template>

<script>
import atlas from 'azure-maps-control'

export default {
  name: 'app',
  data: () => ({
    map: null
  }),
  methods: {
    initMap() {
      this.map = new atlas.Map('myMap', {
                center: [-110, 50],
                zoom: 2,
                view: 'Auto',       
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'keyPlaceholder'
                }
            });
    }
  }
}
</script>

理想情况下，这会创建一个显示在“ myMap” div中的地图，但是无论如何导入atlas都是未定义的。同样令人沮丧的是，当我调用Atlas（atlas.Map（）/ atlas.HttpMarker（））时，可以看到建议的方法和类。

我对Vue比较陌生，并且Azure Maps尚未得到广泛使用，有人可以帮助我解决此问题吗？

Answer 1

好吧，我发现了另一篇有关如何在Angular及其导入策略中使用Azure Maps的Stack Overflow帖子：import * as atlas from 'azure-maps-control'，而且确实足够了。

如何正确将azure-maps-control导入Vue.js应用程序？

1 个答案: