vue引入高德地图

先附上效果图

1. 前往高德官方申请key值

高德 API

2. 这里用的是vue-cli写的项目，所以在utils目录下新建了一个AMap.js文件

附上AMap.js代码

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)
    }
  })
}

3. 在项目中引入AMap.js，关于地图内部更多的方法大家可以去高德官方看文档，官方介绍得也非常详细

一定要给放置地图的的div添加宽高，否则地图无法渲染出来