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.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "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.15
plugins: ["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", {
// 设置地图容器id
viewMode: "2D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [116.397428, 39.90923], // 初始化地图中心点位置
});
traffic = new AMap.TileLayer.Traffic({
autoRefresh: true, //是否自动刷新，默认为false
interval: 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.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
})
.then((AMap) => {
map = new AMap.Map("container", {
// 设置地图容器id
pitch: 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.15
plugins: ["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>