第一步：

需要去高德开放平台注册账号，并申请一个Kye后面需要使用。申请成功后在控制台>我的应用里面可以查看。

第二步：

在项目的根目录打开终端，输入

npm install vue-amap

下载高德地图所需要的包

第三步：

在main.js中引入，具体为：

import AMap from 'vue-amap'

AMap.initAMapApiLoader({
  // 高德的key
  key: '你之前申请的key填在这里',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
})

第四步：

在需要使用地图的组件中调用

<template>
  <div>
    <el-amap
      ref="map"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      mapStyle="amap://styles/darkblue"
      style="width:700px;height:500px;margin:50px 400px"
    >
      <!--mapStyle:地图样式-->
      <!-- 地图中的标记点-->
      <el-amap-circle-marker
        v-for="marker in markers"
        :center="marker.center"
        :radius="marker.radius"
        :fill-color="marker.fillColor"
        :fill-opacity="marker.fillOpacity"
        :events="marker.events"
      ></el-amap-circle-marker>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 18,//缩放
      center: [103.941762, 30.765781],//地图定位
      //标记点参数集合
      markers: [
        {
          center: [103.941762, 30.765781],//标点位置
          radius: 12,
          fillOpacity: 1,
          fillColor: "rgba(237,150,134,1)",
          //标点点击事件
          events: {
            click: () => {
              console.log('Hello aMap')
            }
          }
        }
      ]
    };
  }
};
</script>

效果图大概就是下面这样子

成品图