---

如何在 Vue 3 中實現百度地圖位置選擇器組件

前言

在開發前端應用時，地圖選擇器是一個非常常見的需求。尤其是在一些需要用戶選擇地址的場景，如電商平臺、旅游網站、酒店預定等，百度地圖組件能提供準確的地理位置服務。在本文中，我們將一步步展示如何使用 Vue 3 和 Element Plus 來實現一個百度地圖位置選擇器組件。這個組件允許用戶通過地圖選擇位置，并展示詳細的地址信息。

準備工作

在開始實現之前，我們需要確保已經安裝了以下依賴：

• Vue 3：Vue.js 是我們前端應用的基礎框架。
• Element Plus：一個基于 Vue 3 的組件庫，提供了許多高質量的 UI 組件。
• 百度地圖 API：百度地圖 API 提供了豐富的地圖功能接口，供我們在網頁中嵌入地圖，并獲取地理位置信息。

安裝依賴

如果你還沒有安裝這些依賴，可以通過以下命令安裝：

npm install vue@next element-plus

同時，為了能在 Vue 項目中使用百度地圖，我們需要引入百度地圖的 API。在 index.html 中，添加以下代碼：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>

記得將 YOUR_API_KEY 替換成你自己的百度地圖 API 密鑰。

實現步驟

1. 創建百度地圖組件

我們先從創建百度地圖組件開始，這個組件將允許用戶在地圖上選擇位置。

1.1 創建 BaiduMapPicker.vue 組件

首先，我們創建一個 BaiduMapPicker.vue 組件，用于加載地圖和處理用戶選擇的位置。

<template><div id="map" style="height: 100%;"></div>
</template><script setup lang="ts">
import { onMounted, ref, watch } from 'vue';const location = ref({latitude: 26.61246398970894,longitude: 106.59077252491133,
});// 初始化百度地圖
onMounted(() => {const map = new BMapGL.Map("map");const point = new BMapGL.Point(location.value.longitude, location.value.latitude);map.centerAndZoom(point, 15);map.addOverlay(new BMapGL.Marker(point));map.addEventListener('click', (e: any) => {location.value.latitude = e.latlng.lat;location.value.longitude = e.latlng.lng;map.clearOverlays();map.addOverlay(new BMapGL.Marker(e.latlng));});
});
</script><style scoped>
#map {width: 100%;height: 100%;
}
</style>

1.2 說明

• 地圖初始化：我們通過百度地圖的 BMapGL.Map 類來創建一個地圖實例，傳入 longitude 和 latitude 初始化地圖的中心位置，并設置縮放級別。
• 點擊事件：監聽地圖上的點擊事件，用戶每點擊一次地圖，地圖會更新位置并重新標記。

2. 創建主頁面，使用地圖組件

接下來，我們將在主頁面中使用剛剛創建的 BaiduMapPicker 組件。我們會在彈窗中展示地圖，并允許用戶選擇位置。

2.1 創建主頁面

<template><Dialog v-model="dialogVisible" :title="dialogTitle" width="1000px"><div class="container"><h2>選擇位置</h2><BaiduMapPickerv-model="location"@update:location="handleLocationUpdate"/><div class="location-info"><h3>選中的位置信息：</h3><p>緯度：{{ location.latitude }}</p><p>經度：{{ location.longitude }}</p></div></div><template #footer><el-button @click="submitForm" type="primary">確定</el-button><el-button @click="cancel" type="default">取消</el-button></template></Dialog>
</template><script setup lang="ts">
import { ref } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import BaiduMapPicker from '@/components/BaiduMapPicker.vue';const dialogVisible = ref(false);
const dialogTitle = ref("選擇地址");
const location = ref({ latitude: 26.61246398970894, longitude: 106.59077252491133 });const handleLocationUpdate = (newLocation: { latitude: number, longitude: number }) => {location.value = newLocation;
};const submitForm = () => {dialogVisible.value = false;console.log("提交的位置：", location.value);
};const cancel = () => {dialogVisible.value = false;
};
</script><style scoped>
.container {padding: 20px;
}.location-info {margin-top: 20px;background-color: #f5f7fa;padding: 15px;border-radius: 5px;
}h2 {margin-bottom: 15px;font-size: 1.5em;
}h3 {margin-bottom: 10px;
}p {font-size: 1em;margin: 5px 0;
}
</style>

2.2 說明

• Dialog 彈窗：我們使用了 Element Plus 的 Dialog 組件來展示百度地圖和位置信息。當用戶點擊“確定”時，我們可以通過 submitForm 方法提交選中的位置。
• 位置更新：當用戶點擊地圖時，handleLocationUpdate 會被觸發，更新 location 數據并顯示在頁面上。

3. 彈窗控制與位置展示

我們使用了 Element Plus 的 Dialog 組件來控制彈窗的顯示與隱藏，確保用戶體驗良好。

const dialogVisible = ref(false); // 控制彈窗的顯示
const dialogTitle = ref("選擇地址"); // 彈窗標題

通過這種方式，我們實現了一個簡單而直觀的地址選擇功能。

效果展示

3.1 位置選擇

用戶可以在彈窗中看到百度地圖，點擊任意位置，地圖上的標記會隨之更新，顯示選中的緯度和經度。

3.2 提交結果

點擊“確定”后，用戶選擇的經緯度數據會被提交，并可以用于后續的業務邏輯。

---

總結

通過這篇博客，我們學習了如何在 Vue 3 中使用百度地圖 API 實現一個位置選擇器組件。該組件不僅支持位置選擇功能，還能夠展示用戶選擇的詳細地址信息。通過 Vue 3 和 Element Plus 的結合，我們能夠快速開發出高質量的 UI 組件，提升用戶體驗。

小貼士

1. API 密鑰保護：在生產環境中，記得將百度地圖的 API 密鑰保存在安全的地方，避免暴露在前端代碼中。
2. 優化加載速度：考慮到地圖加載時間較長，可以對地圖組件進行懶加載，提升用戶體驗。

---