vue 异步导入高德地图

1.首先在src下面创建plugins文件夹，再创建amap.js文件，里面内容

/*
 * 异步创建script标签
 */
export default function MapLoader() {

  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {

      var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您自己的key&callback=onLoad';
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onerror = reject;
      document.head.appendChild(script)

    }
    window.onLoad = () => {
      resolve(window.AMap)
    }
  })

}

2.然后在你的任何组件里这样使用

<script>
  import MapLoader from '@/plugins/amap.js'

  export default {
    name: 'bigData',
    data() {
      return {
        map: null
      }
    },
    mounted() {

      let that = this
      MapLoader().then(AMap => {
        console.log('地图加载成功')
        that.map = new AMap.Map("container", {
          resizeEnable: true,
          mapStyle: 'amap://styles/您自己的自定义样式', //设置地图的显示样式
        });
      }, e => {
        console.log('地图加载失败', e)
      })
    }
  }

</script>