在vue中使用高德地图（异步引入方式，不使用依赖）

1、创建一个AMap.js,路径：src/assets/AMap/AMap.js

/*
 * 异步创建script标签 
 */
export default function MapLoader () { 
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=高德申请的key'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

2、在任何.vue文件中使用：

<template>
  <div class="container">
    <div class="maploader">
      <div id="mymap" class="map"></div>
    </div>
  </div>
</template>

<script>
import MapLoader from '@/assets/AMap/AMap.js'

export default {
  components: {
  },
  name: 'maploader',
  data() {
    return {
      map: null
    };
  },
  mounted () {
    let that = this
    MapLoader().then(AMap => {
      console.log('地图加载成功')
      that.map = new AMap.Map("mymap", {
        resizeEnable: true,
        center: [117.000923, 36.675807],
        zoom: 11
      });
    }, e => {
      console.log('地图加载失败' ,e)
    })
  },
};
</script>

<style lang="scss">
.map {
  height:640px;
  width:100%;
}
</style>