注册开发者账号并获得Key

1、进入官网https://lbs.amap.com/，注册并登录
2、登陆之后，点击控制台进入 [ 应用管理 ] 页面 [ 创建新应用 ]

3、获得应用 Key值，[ 服务平台 ]一项选择 [ Web 端 ( JSAPI )或 Web 服务 ]

原生的方式引入

封装remoteLoad.js
在vue-cli项目目录结构新增utils文件夹 ，utils文件夹里面，新建一个remoteLoad.js，主要是动态创建script标签，封装了一个函数传入URL地址

export default function remoteLoad (url, hasCallback) {
    return createScript(url)
    /**
     * 创建script
     * @param url
     * @returns {Promise}
     */
    function createScript (url) {
        var scriptElement = document.createElement('script')
        document.body.appendChild(scriptElement)
        var promise = new Promise((resolve, reject) => {
            scriptElement.addEventListener('load', e => {
                removeScript(scriptElement)
                if (!hasCallback) {
                    resolve(e)
                }
            }, false)

            scriptElement.addEventListener('error', e => {
                removeScript(scriptElement)
                reject(e)
            }, false)

            if (hasCallback) {
                window.____callback____ = function () {
                    resolve()
                    window.____callback____ = null
                }
            }
        })

        if (hasCallback) {
            url += '&callback=____callback____'
        }

        scriptElement.src = url

        return promise
    }

    /**
     * 移除script标签
     * @param scriptElement script dom
     */
    function removeScript (scriptElement) {
        document.body.removeChild(scriptElement)
    }
}

定义组件

 <template>
        <div class="m-map">
            <div id="js-container" class="map"></div>
        </div>
    </template>
    
    <script>
        const MapKey = '5187e3f6db9301694f086c16f4082c94'  //获取的Key值
        import remoteLoad from '../utils/remoteLoad.js'
        export default {
            name: "MapDrag",
            props: {
                currentPosition:Array,
                default:[]
            },
            data () {
                return {
                    dragStatus: false,
                    AMapUI: null,
                    AMap: null,
                }
            },
            methods: {
                // 实例化地图
                initMap() {
                    // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
                    let AMapUI = this.AMapUI = window.AMapUI
                    let AMap = this.AMap = window.AMap
                    AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
                        let mapConfig = {
                            zoom: 12, //缩放比例
                            center: this.currentPosition, //设置地图中心点坐标
                            mapStyle: 'amap://styles/macaron',  //设置地图的显示样式,可在高德地图中设置自定义地图，mapStyle: 'amap://styles/自定义地图id'
                        }
                        let map = new AMap.Map('js-container', mapConfig)
                        // 启用工具条
                        AMap.plugin(['AMap.ToolBar'], function () {
                            map.addControl(new AMap.ToolBar({
                                position: 'RB'
                            }))
                        })
                        // 创建地图拖拽
                        let positionPicker = new PositionPicker({
                            mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                            map: map // 依赖地图对象
                        })
                        // 拖拽完成发送自定义 drag 事件
                        positionPicker.on('success', positionResult => {
                            // 过滤掉初始化地图后的第一次默认拖放
                            if (!this.dragStatus) {
                                this.dragStatus = true
                            } else {
                                this.$emit('drag', positionResult)
                            }
                        })
                        // 启动拖放
                        positionPicker.start()
                    })
                }
            },
            watch: {
                currentPosition(){
                    this.initMap()
                }
            },
            async mounted () {
                // 已载入高德地图API，则直接初始化地图
                if (window.AMap && window.AMapUI) {
                    this.initMap()
                    // 未载入高德地图API，则先载入API再初始化
                } else {
                    // 载入高德地图和UI组件
                    await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`)
                    await remoteLoad('http://webapi.amap.com/ui/1.0/main.js')
                    this.initMap()
                }
            }
        }
    </script>
    
    <style >   
        .m-map{ width: 100%; height: 100%; position: relative; }
		.m-map .map{ width: 100%; height: 100%; }
    </style>

调用组件

import MapDrag from '../components/MapDrag'
 
 //currentPosition: [103.775279, 30.683501]  当前经纬度
 <MapDrag @drag="dragMap" class="mapbox" :currentPosition="currentPosition"></MapDrag>

 //拖拽地图
            dragMap (data) {
                this.dragData = {
                    lng: data.position.lng,
                    lat: data.position.lat,
                    address: data.address,
                    nearestJunction: data.nearestJunction,
                    nearestRoad: data.nearestRoad,
                    nearestPOI: data.nearestPOI
                }
            },

效果图

@amap/amap-jsapi-loader引入

安装依赖@amap/amap-jsapi-loader

yarn add @amap/amap-jsapi-loader

设置全局样式，隐藏logo

.amap-logo {
  display: none!important;
  visibility: hidden!important;
}
.amap-copyright {
  display: none!important;
  visibility: hidden!important;
}

封装组件

<template>
  <div class="home_div">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {};
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "3862bb74758c8d185100ed5df030949d", //设置您的key
        version: "2.0",
        plugins: [],
        AMapUI: {
          version: "1.1",
          plugins: ["control/BasicControl"],
        },
        Loca: {
          version: "2.0",
        },
      })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              rotateEnable: true,
              pitchEnable: true,
              zoom: 9,
              zooms: [5, 20],
              center: [103.762273, 30.697175],//中心点坐标
              resizeEnable: true, //是否监控地图容器尺寸变化
              // showLabel: false,//是否显示标注
              mapStyle: "amap://styles/darkblue", //地图样式
            });
            this.getStatisticsData()
          })
          .catch((e) => {
            console.log(e);
          });
    }
  },
  mounted() {
    this.initAMap();
  }
};
</script>
<style lang='less'>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

调用组件

import amapfrom '../components/amap'

<amap></amap>

效果图