首先需要自己去注册高德地图开发者平台的账号获取key码，

然后在vue项目中输入命令下载高德地图插件

npm i @amap/amap-jsapi-loader --save

然后在你想要使用的组件中导入

 import AMapLoader from "@amap/amap-jsapi-loader";

创建一个盛放地图的盒子

 <div class="map-box" id="container">

 </div>

然后在methods里使用，并且需要在mounted中初始化地图插件

     methods:{
            initMap() {
                var that=this
                AMapLoader.load({
                    "key": "", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1
                        "plugins":[],       // 需要加载的 AMapUI ui插件
                    }
                }).then(AMap => {
                        this.map = new AMap.Map("container", {
                            //设置地图显示的缩放级别
                            zoom: 15,
                            // 是否允许鼠标拖拽
                            dragEnable: true,
                            // 鼠标滚轮放大缩小
                            scrollWheel: true,
                            // 双击放大缩小
                            doubleClickZoom: true,
                            // 键盘控制发达缩小移动旋转
                            keyboardEnable: false,
                            // 手势控制
                            touchZoom: false,
                            center: [114.614989, 38.025327],//设置地图中心点坐标
                        }),
                        // //构建信息窗体中显示的内容
                        //     this.info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>"),
                        // this.infoWindow = new AMap.InfoWindow({
                        //         content: this.info.join("")  //使用默认信息窗体框样式，显示信息内容
                        //     }),
                        //     this.infoWindow.open(this.map, this.map.getCenter())
                    //在指定位置打开信息窗体
                            (function () {
                                // console.log(this)
                        //构建信息窗体中显示的内容
                        var info = [];
                        info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>");
                        let infoWindow = new AMap.InfoWindow({
                            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                        });
                        infoWindow.open(that.map, that.map.getCenter());
                    })()
                    }).catch(e => {
                        console.log(e);
                    });
            }
        },
        mounted(){
            this.initMap()
        }

注：这里盛放地图容器盒子的id(container)需要和地图实例中的名字想对应

 this.map = new AMap.Map("container", {

    }

如果需要加信息窗体，例如：

就需要在then回调中加 

    function openInfo() {
        //构建信息窗体中显示的内容
        var info = [];
        info.push("<div class='input-card content-window-card'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
        info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
        info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
        info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");

        infoWindow = new AMap.InfoWindow({
            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
        });

        infoWindow.open(map, map.getCenter());
    }

这里我写了一个例子：

initMap() {
                var that=this
                AMapLoader.load({
                    "key": "", // 申请好的Web端开发者Key，首次调用 load 时必填
                    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                        "version": '1.1',   // AMapUI 缺省 1.1
                        "plugins":[],       // 需要加载的 AMapUI ui插件
                    }
                }).then(AMap => {
                        this.map = new AMap.Map("container", {
                            //设置地图显示的缩放级别
                            zoom: 15,
                            // 是否允许鼠标拖拽
                            dragEnable: true,
                            // 鼠标滚轮放大缩小
                            scrollWheel: true,
                            // 双击放大缩小
                            doubleClickZoom: true,
                            // 键盘控制发达缩小移动旋转
                            keyboardEnable: false,
                            // 手势控制
                            touchZoom: false,
                            center: [114.614989, 38.025327],//设置地图中心点坐标
                        }),
                        // 1.直接写
                        //     this.info.push("<p class='input-item'>地址 :河北省</p></div></div>"),
                        // this.infoWindow = new AMap.InfoWindow({
                        //         content: this.info.join("")  //使用默认信息窗体框样式，显示信息内容
                        //     }),
                        //     this.infoWindow.open(this.map, this.map.getCenter())
                    //2.封装成函数写
                            (function () {
                                // console.log(this)
                        //构建信息窗体中显示的内容
                        var info = [];
                        info.push("<p class='input-item'>地址 :河北省石家庄市方大科技园</p></div></div>");
                        let infoWindow = new AMap.InfoWindow({
                            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
                        });
                        infoWindow.open(that.map, that.map.getCenter());
                    })()
                    }).catch(e => {
                        console.log(e);
                    });
            }
        

这样就可以了

注：如果封装成函数来写，需要注意this指向，这里函数中this不指向vue组件了，需要借助另一个变量来赋值操作，也就是把this赋值给that，这时候我们就把that当做this来用，从而使得that指向vue组件

var that=this