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'
};
// 动态加载高德地图JS
await 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, // 初始缩放级别为 13
center: [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(''); // 拼接完整地址
// 这里赋值给address
form.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); // 查找省的code
let cityCode = findCode(city, regionData); // 查找市的code
const districtCode = findCode(district, regionData); // 查找区的code
// 设置级联选择器值
if (provinceCode && cityCode && districtCode) {
cityCode = cityCode.length == 2 ? cityCode + '01' : cityCode; // 给直辖市的市code添加01
form.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('地图加载失败，请检查网络连接或稍后再试');
}
};
