高德地圖在Vue3中的使用方法

1.地圖初始化

????????容器創建：通過?<div>?標簽定義地圖掛載點。

<div id="container" style="height: 300px; width: 100%; margin-top: 10px;"></div>

????????密鑰配置：綁定高德地圖安全密鑰，確保 API 合法調用。

????????參數配置：定義地圖縮放比例、初始中心點經緯度（數組格式?[lng, lat]）。

????????標記點初始化：創建?Marker?實例用于后續定位

// 初始化地圖（完全異步化）
const initMap = async () => {// 確保DOM已渲染await nextTick();// 檢查容器是否存在const container = document.getElementById('container');if (!container) {console.error('地圖容器不存在，可能對話框尚未完全渲染');return false;}if (mapLoaded.value && map.value) return true; // 如果已經加載過且地圖已初始化，直接返回try {// 設置安全配置(window as any)._AMapSecurityConfig = {securityJsCode: '76f83426ac3692c440bc1efd2b15fff6'};// 動態加載高德地圖JSawait new Promise((resolve, reject) => {if ((window as any).AMap) return resolve(true); // 如果已經加載過，直接返回const script = document.createElement('script'); // 創建script標簽script.src = 'https://webapi.amap.com/maps?v=2.0&key=f10b74bad0d89466b9e174aaefb9a3f7&plugin=AMap.Geocoder';script.onload = resolve; // 加載成功后調用 resolve 函數script.onerror = reject; // 加載失敗后調用 reject 函數document.head.appendChild(script);});// 再次檢查容器是否存在 （id 是唯一的）if (!document.getElementById('container')) {console.error('地圖容器在腳本加載后不存在');return false;}// 初始化地圖map.value = new (window as any).AMap.Map('container', {zoom: 13, // 初始縮放級別為 13center: [116.397428, 39.90923], // 初始中心點為 [116.397428, 39.90923]，即天安門廣場});// 初始化標記marker.value = new (window as any).AMap.Marker({map: map.value});mapLoaded.value = true;return true; // 返回 true 表示成功加載} catch (error) {console.error('地圖初始化失敗:', error);proxy?.$modal.msgError('地圖加載失敗');return false; // 返回 false 表示加載失敗}
};

2.地址選擇與解析

級聯選擇器：選擇省、市、縣三級行政區（普通省份為三級，直轄市可能缺少縣級）。

詳細地址輸入：用戶手動補充街道、樓棟等詳細信息。

地址合并：將級聯選擇結果與輸入框內容拼接成完整地址字符串。

地理編碼：調用高德地圖 API 將地址轉為經緯度。

更新標記點：將解析后的經緯度更新到地圖標記。

防抖函數：控制高頻觸發的事件或函數的執行頻率，確保在事件連續快速觸發時，只在最后一次觸發后的一段時間內執行一次目標操作。

// 防抖函數
const debounce = (fn: Function, delay: number) => {let timer: ReturnType<typeof setTimeout>; // 用于存儲定時器的返回值return function (this: any, ...args: any[]) {clearTimeout(timer); // 清除上一次的定時器timer = setTimeout(() => fn.apply(this, args), delay); // 設置新的定時器};
};

// 處理地址選擇變化（核心邏輯）
const handleAddressChange = debounce(async () => {try {await initMap();const selectedLabels = form.value.addressArray?.map(code => codeToText[code]) || []; // 獲取選中的省市區const detailAddress = form.value.addressDetail?.trim() || ''; // 獲取詳細地址const fullAddress = [...selectedLabels, detailAddress].join(''); // 拼接完整地址// 這里賦值給addressform.value.address = fullAddress;if (!fullAddress) return; // 如果地址為空，不進行解析const geocoder = new (window as any).AMap.Geocoder({city: selectedLabels[0] || '' // 根據選中的省設置地圖上的城市});interface GeocoderResult {status: string; // 狀態碼result: any; // 解析結果}const { status, result } = await new Promise<GeocoderResult>((resolve, reject) => {geocoder.getLocation(fullAddress, (status, result) => {if (status === 'complete') resolve({ status, result }); // 成功解析else reject(new Error(result?.info || '地址解析失敗')); // 失敗});});if (status === 'complete' && result.geocodes?.length) {// geocodes 是高德地圖API返回的地理編碼結果數組，它包含了地址解析后的地理信息。/** geocodes：[{*      location : 包含經緯度坐標(lng, lat)*      formattedAddress : 格式化后的完整地址*      addressComponent : 地址組成信息(省、市、區等)*      level : 地址匹配的精確度級別* }]*/const lnglat = result.geocodes[0].location;map.value?.setCenter(lnglat); // 將地圖中心移動到解析后的位置marker.value?.setPosition(lnglat); // 將標記移動到解析后的位置// 更新表單坐標form.value.longitude = lnglat.lng;form.value.latitude = lnglat.lat;}} catch (error) {console.error('地址解析錯誤:', error);proxy?.$modal.msgError(error.message);}
}, 500);

3. 直轄市特殊處理以及回顯

問題背景：直轄市（如北京、上海）的級聯數據層級缺失（如?北京市 -> 北京市）。
直接拼接會導致地址重復（如?北京市北京市朝陽區xx路）。

修復邏輯：通過判斷省、市名稱是否相同，動態修正地址字符串

/** 修改按鈕操作 */
const handleUpdate = async (row?: TenantVO) => {reset();await getTenantPackage();const _id = row?.id || ids.value[0];const res = await getTenant(_id);Object.assign(form.value, res.data);// 確保對話框完全打開dialog.visible = true;dialog.title = '修改租戶';try {// 等待地圖初始化完成await initMap();// 判讀經緯度是否有值if (form.value.longitude && form.value.latitude) {map.value?.setCenter([form.value.longitude, form.value.latitude]); // 將地圖中心移動到解析后的位置marker.value?.setPosition([form.value.longitude, form.value.latitude]); //  將標記移動到解析后的位置// 執行逆地理編碼// 傳入經緯度數組 [form.value.longitude, form.value.latitude] ，獲取地址信息const geocoder = new (window as any).AMap.Geocoder();const { status, result } = await new Promise((resolve, reject) => {geocoder.getAddress([form.value.longitude, form.value.latitude], (status, result) => {if (status === 'complete') resolve({ status, result });else reject(new Error(result?.info || '地址解析失敗'));});});if (status === 'complete' && result.regeocode) {const address = result.regeocode.formattedAddress;const addressComponent = result.regeocode.addressComponent;const province = addressComponent.province;const city = addressComponent.city || province; // 如果沒有city，使用province代替 因為直轄市沒有city字段/*** addressComponent = {*    province: "北京市",*    city: "", // 直轄市可能沒有city字段*    district: "朝陽區"*   }*/const district = addressComponent.district;// 更新表單中的地址信息form.value.address = address;// 將省市區轉換為級聯選擇器需要的code格式const findCode = (name, data) => {// name 為省市區名稱，data 為 regionData 數據包含了中國的省、市、區三級行政區劃信息for (const item of data) {if (item.label === name) return item.value;if (item.children && item.children.length > 0) {const childCode = findCode(name, item.children); // 遞歸查找子級if (childCode) return childCode; // 如果找到了，返回code}}return null;};const provinceCode = findCode(province, regionData); // 查找省的codelet cityCode = findCode(city, regionData); // 查找市的codeconst districtCode = findCode(district, regionData); // 查找區的code// 設置級聯選擇器值if (provinceCode && cityCode && districtCode) {cityCode = cityCode.length == 2 ? cityCode + '01' : cityCode; // 給直轄市的市code添加01form.value.addressArray = [provinceCode, cityCode, districtCode];}// 設置詳細地址// 需要三元運算符，因為直轄市會重復顯示，所以進行判斷 直轄市的 province 和 city 是一樣的province == city ? form.value.addressDetail = address.replace(`${province}${district}`, '') : form.value.addressDetail = address.replace(`${province}${city}${district}`, '');// console.log(province, city, district);}} else {// 默認顯示天安門廣場const tiananmenPosition = [116.397428, 39.90923];map.value?.setCenter(tiananmenPosition);marker.value?.setPosition(tiananmenPosition);}} catch (error) {console.error('地圖操作錯誤:', error);if (!form.value.longitude || !form.value.latitude) {// 如果是沒有經緯度的情況，不顯示錯誤提示return;}proxy?.$modal.msgError('地圖加載失敗，請檢查網絡連接或稍后再試');}
};