1. npm安装
   可以先看一眼amap的文档 熟悉里面的一些插件和api
   https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

//安装命令
npm install vue-amap --save

2. main.js文件配置

import VueAMap from 'vue-amap'  //引入
Vue.use(VueAMap)				//全局注册
VueAMap.initAMapApiLoader({ 	//初始化
  key: '3aaff3b0ba41ba7ac1ef4932e16991c4',		//高德地图api开放平台申请的key
  //需要用到的插件 用什么放什么 放多余的加载会很慢
  plugin: ['AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'],	 
  v: '1.4.4'	//版本号
})

3. index.vue文件配置
   引入一个简单的地图

<template>
  <div>
    <div class="amap-page-container">
      // 地图组件
      <el-amap
        ref="map"
        //地图的id
        vid="amapDemo"
        :amap-manager="amapManager"
        //地图的中心点
        :center="center"
        //地图的缩放比例
        :zoom="zoom"
        //绑定的插件
        :plugin="plugin"
        //绑定的事件
        :events="events"
        class="amap-demo"
      >
      </el-amap>
    </div>
  </div>
</template>
<script>
// 引入AMapManager 
import { AMapManager } from "vue-amap";
//获取实例
let amapManager = new AMapManager();
export default {
  data() {
    return {
      amapManager,
      zoom: 12,
      center: [120.19, 30.26],
      events: {
        init: (o) => {
          o.getCity((result) => {
            console.log(result);
          });
        },
        click: (e) => {
        	console.log(e)
        },
      },
    };
  },
};
</script>
<style scoped>
.amap-page-container {
  width: 100%;
  height: 400px;
}
</style>