vue-cli中使用高德地图

第一步:申请高德地图开发者平台key码 (如不知步骤可以看我发的上一篇帖子)

第二步:在vue-cli项目中下载高德地图插件 命令如下

npm 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);
                    });
            }

第五步:在mounted中调用刚才定义的方法,初始化地图. 

第六步:创建地图的容器,注意id名和实例化对象中的第一个参数名保持一致; 一定要给容器高度不然不会显示; 

 <div id="container" style="height: 500px"></div>