vue-cli中使用高德地图及其插件

一、先去高德地图Api申请账号，创建账号—>创建应用—>添加key（很重要，没有key下面步骤无意义）  高德地图网址：高德地图API

二、在vue-cli中下载高德地图插件

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

cnpm i @amap/amap-jsapi-loader --save//淘宝镜像下载

三、在即将使用地图的组件内引入

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

四、在methods中定义方法

initMap() {
                AMapLoader.load({
                    "key": "你的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: [117.151202,36.664857],//设置地图中心点坐标
                        });
                    })
                    .catch(e => {
                        console.log(e);
                    });
            }
————————————————
版权声明：本文为CSDN博主「走向大前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/abs_botton/article/details/122129770

五、在mounted中调用第四步中定义的方法

this.initMap()

六、创建地图容器（地图的显示位置），并给容器加上高度，否则不会显示。

注意：容器id要与实例化对象中的第一个参数保持一致，即代码中的container保持一致

七、此时已经成功创建高德地图插件并将其渲染在页面中。

---

（以下为高德地图中ui插件的使用，以信息窗体和点标记为例）

八、点标记：

（可以去官网开发支持—>web端 地图 JS API 看更详细的介绍）

//创建小点标记
let marker = new AMap.Marker({
    position: [] // 基点坐标
});
// 地图添加标记
this.map.add(marker);

将上面代码插入到   .then    中，map实例后，即可添加点标记。

九、信息窗体：

//信息窗体
let infoWindow = new AMap.InfoWindow({
    anchor: 'top-right',//信息窗体的三角所在位置
    content: '窗体信息',//写入窗体中显示的信息
});

infoWindow.open(this.map,[‘坐标’]); //填写想要窗体信息指示的坐标

代码插入位置与点标记代码插入位置相同。