web-website/src/views/resource/resource.vue

<template>
  <div id="resource">
    <el-row>
      <el-col :span="24">
        <div id="container">
          <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import VueAMap from 'vue-amap';
import Vue from 'vue';
Vue.use(VueAMap);
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'resource',
  props: {},
  components: {},
  data: function() {
    return {};
  },
  created() {
    this.handlemyMapFn();
  },
  methods: {
    handlemyMapFn() {
      VueAMap.initAMapApiLoader({
        key: '4674208108af32f72dbcd161cd915c94',
        plugin: [
          'AMap.PolyEditor', //编辑 折线多，边形
        ], // 默认高德 sdk 版本为 1.4.4
        v: '1.4.4',
      });
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100vh;
}
</style>