高德地图在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('地图加载失败，请检查网络连接或稍后再试');}
};