1

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

使用npm安装后azure-maps-control，我已经尝试了多种方式导入node模块：

  • 尝试使用Vue.use(require('azure-maps-control'))

  • 尝试在Vue文件本身中导入import atlas from azure-maps-control

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

主.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')

应用程序.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 还没有被广泛使用，谁能帮我解决这个问题？

4

1 回答 1

2

好吧，我发现了另一个 Stack Overflow 帖子，介绍了如何将 Azure Maps 与 Angular 及其导入声明一起使用：import * as atlas from 'azure-maps-control'果然，它就像一个魅力。

于 2019-09-23T15:34:03.687 回答