问题：求教，如何正确在vue中引入地图amap组件？

Question

问题：求教，如何正确在vue中引入地图amap组件？
问题描述：

我按照amap文档的步骤，尝试在引入的地图上设置定位按钮时出错。在不断改正后仍然没有结果，在网上寻找答案也没找到符合情况的解决方案，（我是新手，对很多配置操作不太了解，不知道哪里出错了）。

问题截图：

vue块代码：

<template>
  <!-- 地图容器大小 -->
  <div class="amap-wrap">
    <!-- <div class="amap-page-container"> -->
      <!-- 载入地图 -->
      <el-amap
        id="amapContainer"
        :zoom="zoom"
        :events="events"
        class="amap-demo"
      >
        <!-- 定位插件 -->
        <el-amap-control-geolocation :visible="visible" @complete="getLocation">
        </el-amap-control-geolocation>
      </el-amap>

      <div class="toolbar">
        <button @click="switchVisible()">
          {{ visible ? "隐藏" : "显示" }}
        </button>
      </div>
    <!-- </div> -->
  </div>
</template>
  
  <script>
  //引入组件

//

import VueAMap from 'vue-amap';

import { lazyAMapApiLoaderInstance} from "vue-amap";


export default {
  name: "MyComponent",
  //组件定义
  components:
  {
    //'el-amap':VueAMap.AMap,
   'el-amap-control-geolocation': VueAMap.getLocation,
  },

  // 数据 方法
  data() {
    return {
      map: null,
      zoom: 17,
      events: {},
      visible: true,
    };
  },
  methods: {
    switchVisible() {
      this.visible = !this.visible;
    },
    getLocation(e) {
      console.log("getLocation: ", e);
    },
  },
  mounted() {
    //加载高德地图的API
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new window.AMap.Map("amapContainer", {
        center: new window.AMap.LngLat(121.530072, 31.24053),
        zoom: this.zoom,
      });
      var marker = new window.AMap.Marker({
        map: this.map,
        //光点图标
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [121.530072, 31.24053],
      });
      marker.setMap(this.map);
    });
  },
};
</script>
<!--   -->
  <style scoped>
.amap-wrap {
  height: 100%;
}
.amap-demo {
  height: 

main.js代码:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// ------//
// 引入 element ui 组件目录
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//------//
// 引入 vueAMap  组件目录
import VueAMap from 'vue-amap';

//import VueAMap from '@vuemap/vue-amap'



Vue.config.productionTip = false
//使用ElementUI 组件
Vue.use(ElementUI);

//使用VUeAMap 组件
Vue.use(VueAMap);

//
//Vue.use(ElAmapControlGeolocation);

//引入地图所需插件
VueAMap.initAMapApiLoader({
  key: '522c38a157a79039e70cd2a3e41d03c1',
  //引入的插件
  plugin: [ "AMap.getLocation","AMap.AMap",],
  //版本号
  v: '1.4.4',
  uiVersion: '1.0' // 版本号
});
window._AMapSecurityConfig =
{
 securityJsCode:'bc492f3261717a214ce01902b8c941ce'
}

//------//
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

eslintrc.js配置：

module.exports = {
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
    
    }
    ,
    globals: {
        'AMap': true,
        'AMapUI': true
      }
}

这里面还有类似于 必须引入Vue.AMap, 但必须加window.前缀的问题，以及组件无法识别的问题。
不知道该怎么改。