Vue3项目引入高德地图【超详细教程】
前言
在 Vue 3 项目中集成高德地图（AMap）是一个常见的需求。本文将详细介绍如何在 Vue 3 项目中使用高德地图，包括安装配置、基本使用以及一些进阶功能的实现。
一、环境准备
1.1 vue3项目初始化
步骤 1：初始化项目
npm create vite@latest
步骤 2：按提示选择配置
✔ Project name: … your-project-name # 输入项目名称
✔ Select a framework: › Vue # 选择框架
✔ Select a variant: › TypeScript # 或 JavaScript
步骤 3：进入项目并安装依赖
cd your-project-name
npm install
步骤 4：启动开发服务器
npm run dev
1.2 安装map依赖
npm i @amap/amap-jsapi-loader --save
二、申请高德地图 Key
2.1 登录控制台
登录 高德开放平台控制台，如果没有开发者账号，请 注册开发者。
2.2 创建 key
进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。
2.3 获取 key 和密钥
创建成功后，可获取 key 和安全密钥。
三、开发一个地图组件
3.1 新建 MapContainer.vue 文件
在项目中新建 MapContainer.vue 文件，用作地图组件。
3.2 创建地图容器
在 MapContainer.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 container。
<template><div id="container"></div>
</template>
<style scoped>#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>
3.3 引入 JS API Loader
在地图组件 MapContainer.vue 中引入 amap-jsapi-loader
import AMapLoader from '@amap/amap-jsapi-loader';
3.4 创建地图实例
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});
</script><template><div id="container"></div>
</template><style scoped>
#container {width: 100%;height: 800px;
}
</style></script>效果图：
四、基础使用
4.1 地图控件
- 比例尺
AMap.Scale - 工具条
AMap.ToolBar - 方向盘
AMap.ControlBar - 鹰眼
AMap.HawkEye
完整代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;
//图层
let traffic = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"], //需要使用的的插件列表}).then((AMap) => {const layer = new AMap.createDefaultLayer({zooms: [3, 20], //可见级别visible: true, //是否可见opacity: 1, //透明度zIndex: 0, //叠加层级});map = new AMap.Map("container", {// 设置地图容器idviewMode: "2D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});traffic = new AMap.TileLayer.Traffic({autoRefresh: true, //是否自动刷新，默认为falseinterval: 180, //刷新间隔，默认180s});map.add(traffic); //通过add方法添加图层console.log(traffic);// 添加比例尺const scale = new AMap.Scale({position: "LB", //左下角});map.addControl(scale);// 添加工具条const toolBar = new AMap.ToolBar({position: {right: "40px",top: "105px",},});map.addControl(toolBar);// 添加方向盘const controlBar = new AMap.ControlBar({position: {right: "10px",top: "10px",},showControlButton: true, //显示倾斜、旋转按钮});map.addControl(controlBar);// 添加鹰眼const hawkEye = new AMap.HawkEye({opened: true, // 默认展开position: "RB", // 右上角width: "200px",height: "150px",});map.addControl(hawkEye);}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script><template><div id="container"></div><div class="traffic-btn"><button @click="traffic.show()">显示交通图层</button><button @click="traffic.hide()">隐藏交通图层</button></div>
</template><style>
#container {width: 100%;height: 800px;
}
</style>
4.2 3D地图
viewMode: "3D", //开启3D视图,默认为关闭
完整代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {// 设置地图容器idpitch: 50, //地图俯仰角度，有效范围 0 度- 83 度viewMode: "3D", //开启3D视图,默认为关闭rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动zoom: 13, //初始化地图层级rotation: -15, //初始地图顺时针旋转的角度zooms: [2, 20], //地图显示的缩放级别范围center: [116.333926, 39.997245], //初始地图中心经纬度});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script>
4.3 添加标记物
1. 创建一个 Marker 实例：
const marker = new AMap.Marker({position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: "北京",
});
//将创建的点标记添加到已有的地图实例：
map.add(marker);
2. 给 Marker 添加事件
//创建点标记的点击事件
marker.on("click", function (e) {alert("你点击了Marker");
});
3. 完整代码
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";let map = null;onMounted(() => {window._AMapSecurityConfig = {securityJsCode: "「你申请的安全密钥」",};AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {map = new AMap.Map("container", {zoom: 10, //地图级别center: [116.397428, 39.90923], //地图中心点viewMode: "2D", //设置地图模式});//创建一个 Marker 实例：const marker = new AMap.Marker({position: new AMap.LngLat(116.39, 39.9), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: "北京",});//将创建的点标记添加到已有的地图实例：map.add(marker);marker.on("click", function (e) {alert("你点击了Marker");});}).catch((e) => {console.log(e);});
});
onUnmounted(() => {map?.destroy();
});
</script><template><div id="container"></div>
</template><style>
#container {width: 100%;height: 800px;
}
</style>