vue-cli3引入高德地图

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap' // 高德地图配置
    }
  } 
}

loadMap.js

export default function loadMap (key, plugins, v = 'version') {
  return new Promise(function (resolve, reject) {
    if (typeof AMap !== 'undefined') {
      // eslint-disable-next-line no-undef
      resolve(AMap)
      return true
    }
    window.onCallback = function () {
      // eslint-disable-next-line no-undef
      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)
  })
}

amap.vue

mounted () {
    loadMap(this.key, this.plugins, this.v).then(AMap => {
       this.areaMap = new AMap.Map('main', {
        center: [121.605575, 31.179352],
        zoom: 17,
        zooms: [3, 20]
      })
      this.areaMap.on('complete', () => {
        alert('地图加载成功')
      })
    }).catch(() => {
      alert('地图加载失败！')
    })
  }