1、首先我们需要成为高德地图的开发者,需要有自己的key

2、安装@amap/amap-jsapi-loader

npm install @amap/amap-jsapi-loader 

3、然后再vue项目中引入@amap/amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader'

4、然后进行初始化

	AMapLoader.load({
        'key': '你自己的key',
        'version': '默认不填就是1.4.5的版本',
        'plugins': '插件'
      }).then(AMap => {
        this.loaddingOption.loading = false
        this.map = new AMap.Map( 'container', {
          center: [],
          mapStyle: 'amap://styles/blue',
          viewMode: '3D',
          zoom: 18,
          zooms: [10, 18],
          pitch: 75
        })
      }).catch(e => {
        console.error( e ) 
      })

5、封装好的代码在下面

<template>
  <div class="container" id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'GaoMap',
  data() {
    return {
      map: null,
      options: {
        center: [116.205467, 39.907761],
        zoom: '18',
        zooms: [10, 18],
        viewMode: '3D',
        pitch: '75',
        mapStyle: 'amap://styles/blue',
      }
    };
  },
  mounted() {
    this.initMap()
  },
  components: {
    MoonLoader
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        'key': '你自己的key',
        'version': '',
        'plugins': ''
      }).then(AMap => {
        this.loaddingOption.loading = false
        this.map = new AMap.Map( 'container', {
          center: this.options.center,
          mapStyle: this.options.mapStyle,
          viewMode: this.options.viewMode,
          zoom: this.options.zoom,
          zooms: this.options.zooms,
          pitch: this.options.pitch
        })
      }).catch(e => {
        console.error( e ) 
      })
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loading {
    width: 100%;
    height: 100%;
    z-index: 1000000000000000000000000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>