前言

在 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>