vue 里面异步加载高德地图

export default function MapLoader () {   // <-- 原作者这里使用的是module.exports
  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.3&callback=initAMap&key=yourkey‘
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

// test.vue
<template>
  <div class="test">
    <div id="container" class="h300 w300"></div>
  </div>
</template>
<script>
import MapLoader from ‘@/utils/AMap‘

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