高德地图地理编码 逆地理编码全解析：地址和坐标的双向转换实战
一、为什么需要地理编码和逆地理编码？
在开发中，我们经常会遇到两类核心需求：
地理编码（Address to Coordinates）：给定一个地址，获取它对应的经纬度，用于地图标注、导航定位等。
逆地理编码（Coordinates to Address）：给定经纬度，获取对应的详细地址，方便展示给用户看，提升用户体验。
这两者互为补充，构成了地图开发中地址与坐标转换的基础能力。
✅ 使用npm安装
npm install axios✅ 使用yarn安装
yarn add axios✅ 使用pnpm安装
pnpm add axios
import axios from 'axios';
const AMapKey = '你的key';✅“Web服务API”类型（支持REST接口）
二、逆地理编码实现：经纬度转地址
export const getAddressFromCoords = async (lng: number, lat: number): Promise<string> => {console.log('传入的经纬度', lng, lat)const url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${lng},${lat}&key=${AMapKey}`;try {const res = await axios.get(url);console.log('逆地理接口响应：', res.data)if (res.data.status === '1') {return res.data.regeocode.formatted_address;} else {console.error('高德逆地理编码失败:', res.data.info);return '未知位置';}} catch (err) {console.error('请求高德接口出错:', err);return '位置获取失败';}
}
三、地理编码实现：地址转经纬度
export const geocodeAddress = async (addr:string): Promise<[number, number]> => {console.log('传入的地址', addr)const url=`https://restapi.amap.com/v3/geocode/geo?address=${addr}&output=json&key=${AMapKey}`try {const res = await axios.get(url);console.log('地理编码接口响应：', res.data)if (res.data.status === '1' && res.data.geocodes && res.data.geocodes.length > 0) {const locationStr: string = res.data.geocodes[0].location; // 格式是 "经度,纬度"const [lng, lat] = locationStr.split(',').map(Number);return [lng, lat];} else {console.error('地址转经纬度失败:', res.data.info || '无有效返回');return [0, 0]; // 返回默认经纬度或抛错看需求}} catch (err) {console.error('请求高德接口出错:', err);return [0, 0];}
}
核心逻辑解析：
通过地址拼接请求URL，调用高德地理编码接口
判断返回状态和结果有效性
从结果中提取经纬度字符串，拆分成数字数组返回
出错时返回默认坐标
[0,0]（可自行定制）
四、使用场景示例
地图选点：用户输入地址自动定位坐标（调用地理编码）
坐标回显：设备上传经纬度，页面显示详细地址（调用逆地理编码）
位置搜索：支持地址搜索和坐标定位两种方式
五、总结
通过上述两个方法，你可以实现地址和经纬度的双向转换，满足大部分地图业务需求。后续可结合缓存、异步节流等策略，优化体验和性能。
🌲喜欢这篇文章，记得点赞收藏关注，持续输出更多前端地图技术分享！