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

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

好吧，我发现了另一个 Stack Overflow post 关于如何将 Azure Maps 与 Angular 及其导入状态器一起使用：import * as atlas from 'azure-maps-control' 果然它很有魅力。

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

How do I properly import azure-maps-control into a Vue.js app?

vue.js

azure-maps