我这面给出的解决方案是使用vue-amap这个包

第一步我们首先安装一下 vue-amap这个包

npm install vue-amap

然后在main.js文件中引入

import AMap from 'vue-amap'
AMap.initAMapApiLoader({
  // 申请的高德key
  key: 'fdeb27fa6bea9b4d6e8e2c8521e4dcc2',
  // 插件集合
  plugin: ['']
})

然后咱们直接就可以在组件中使用了

<template>
  <el-amap vid="amapDemo">
  </el-amap>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
}
</script>
<style lang="scss" scoped>
//这里我是给了容器高度
.el-vue-amap-container{
  height: 650px;
}
</style>
// 这里是隐藏高德的logo
<style>
.amap-logo {
display: none !important;
}
.amap-copyright {
display: none !important;
}
</style>