vue+高德地图

一、在高德地图官网申请key

前往高德地图开发平台高德开放平台 | 高德地图API

二、在vue中使用高德地图

1、安装amap-jsapi-loader工具库

npm i amap-jsapi-loader --save

 2.配置密钥(可在main.js中配置)

    //配置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '你的密钥' //*  安全密钥
}

 3.引入amap-jsapi-loader 

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

4.在组件中创建地图容器 

<div>

<div id='container'></div>

</div>

5.载入高德地图

<script>
// 引入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置秘钥(可在main.js配置)
window._AMapSecurityConfig = {
    securityJsCode: "申请的密钥",
};
export default {
    name: "GaodeMapContainer",
    data() {
        return {};
    },

    mounted() {
        this.initData();
    },

    methods: {
        // 1. 展示地图
        async initData() {
            const AMap = await AMapLoader.load({
                key: "申请的key", //申请好的Web端开发者key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
                plugins: [
                    "AMap.ToolBar", // 缩放控件
                    "AMap.ControlBar", //方向控件
                    "AMap.MapType", // 图层切换控件
                    "AMap.Scale", // 比例尺控件
                    "AMap.HawkEye", // 鹰眼控件
                    "AMap.Geolocation", // 定位控件
                    "AMap.MouseTool"
                ], // 引入地图控件
            });
            // 1. 展示图层--创建图层
            const layer = new AMap.createDefaultLayer({
                zooms: [3, 20], //可见级别
                visible: true, //是否可见
                opacity: 1, //透明度
                zIndex: 0, //叠加层级
            });
            // 2.初始化地图-把地图展示到指定的容器区域内
            const map = new AMap.Map("container", {
                viewMode: "2D", //默认使用 2D 模式，平面模式
                zoom: 11, //地图级别
                center: [设置初始坐标], //地图中心点
                mapStyle: "amap://styles/normal", //设置地图的显示样式
                layers: [layer], 
            });
            // 工具-缩放
            const toolbar = new AMap.ToolBar(); //缩放工具条实例化
            map.addControl(toolbar);
            // 工具方向盘
            const controlBar = new AMap.ControlBar();
            map.addControl(controlBar);
            // 工具-图层切换控件
            const mapType = new AMap.MapType();
            map.addControl(mapType);
            // 工具-比例尺
            const scale = new AMap.Scale();
            map.addControl(scale);
            // 工具-鹰眼控件
            const hawkEye = new AMap.HawkEye();
            map.addControl(hawkEye);
            // 工具-定位控件
            const geolocation = new AMap.Geolocation();
            map.addControl(geolocation);
    },
};
</script>

 

6.加入容器样式

<style scoped>
#container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 800px;
    background: #18820e;
}
</style>

 三、效果图

有时间的话更新，实现图中控件功能。如果有不足，请大佬评论指正！