SOURCE

var Main = {
  data() {
    return {
      // 地图实例
      GDMap: null,
      // 加载的一些插件
      // 更多参考：https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins
      plugins: ['AMap.OverView', 'AMap.MouseTool', 'AMap.PolyEditor', 'AMap.RectangleEditor', 'AMap.PlaceSearch', 'AMap.DistrictLayer', 'AMap.CustomLayer'],
      // key
      key: 'c5eac55551560531336988396dacbf53',
      // 地图版本
      v: '1.4.14',
      loading: true
    }
  },
  mounted() {
    this.loadMap(this.key, this.plugins, this.v)
      .then(AMap => {
        this.GDMap = new AMap.Map('GDMap', {
          zoom: 11,
          center: [116.397428, 39.90923]
        })
        this.GDMap.on('complete', () => {
          this.loading = false
        })
      })
      .catch(() => {
        this.loading = false
        console.log('地图加载失败！')
      })
  },
  methods: {
    loadMap(key, plugins, v = '1.4.14') {
      return new Promise(function(resolve, reject) {
        if (typeof AMap !== 'undefined') {
          resolve(AMap)
          return true
        }
        window.onCallback = function() {
          resolve(AMap)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`
        script.onerror = reject
        document.head.appendChild(script)
      })
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.11.0/lib/index.js">
</script>
<div id="app">
  <template>
    <div class="map">
      <div id="GDMap" v-loading="loading">
      </div>
    </div>
  </template>
</div>

@import url("//unpkg.com/element-ui@2.11.0/lib/theme-chalk/index.css");
#GDMap {
  width: 1200px;
  height: 500px;
  position: relative;
}