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>