Как правильно импортировать элемент управления azure-maps-control в приложение Vue.js? - PullRequest
Новая
       12

Как правильно импортировать элемент управления azure-maps-control в приложение Vue.js?

1 голос
/ 23 сентября 2019

Я пытаюсь импортировать и использовать модуль узла "azure-maps-control" в приложении Vue.js, но получаю неопределенную ошибку при попытке создать экземпляр карты.

После установки azure-maps-control с использованием npm я уже пробовал различные способы импорта модуля узла:

  • Пробовал с помощью 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>

В идеале это создаст карту, отображаемую в div 'myMap', но atlasне определено независимо от того, как я его импортирую.Это также разочаровывает, потому что я вижу предлагаемые методы и классы, когда я вызываю atlas (atlas.Map () / atlas.HttpMarker ()).

Я относительно новичок в Vue и Azure Mapsпока не получил широкого распространения, может кто-нибудь помочь мне решить эту проблему?

1 Ответ

1 голос
/ 23 сентября 2019

Ну, я нашел еще одну публикацию о переполнении стека о том, как использовать Azure Maps с Angular и их импортерами: import * as atlas from 'azure-maps-control' и, конечно же, это сработало как шарм.

...