在vue项目中引入高德地图

注册高德地图：

注册地址：高德控制台 

vue中使用高德地图：

第一步：安装 npm install vue-amap --save

第二步：在assets文件中新建一个js文件AMap.js

AMap代码：

// 高德map
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.11&callback=initAMap&key=你获取到的key'
      script.onerror = reject
      document.head.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

vue代码：

<template>
  <div id="container"></div>
</template>
<script>
  import MapLoader from '@/assets/js/AMap.js'
  export default {
    name: "index",
    data() {
      return {
        map: null
      }
    },
    mounted(){
      let that = this
      MapLoader().then(AMap => {
        console.log('地图加载成功')
        that.map = new AMap.Map('container', {
          //center: [116.401538,39.929543],
          resizeEnable: true
          zoom: 12
        })
      }, e => {
        console.log('地图加载失败' ,e)
      })
    },
    methods: {}
  }
</script>

<style>
  #container{
    width: 100%;
    height: 100%;
  }
</style>