当前位置： 首页 > news >正文

vue集成高德地图API工具类封装

news 2025/9/9 10:17:52 
import axios, { AxiosInstance, AxiosResponse } from 'axios';// 高德地图 API 响应基础结构
interface AMapResponse {status: string;info: string;infocode: string;
}// 逆地理编码响应结构
interface RegeoResponse extends AMapResponse {regeocode: {formatted_address: string;addressComponent: {province: string;city: string;district: string;township: string;citycode: string;adcode: string;};pois?: Array<{ id: string; name: string; address: string }>;roads?: Array<{ id: string; name: string }>;roadinters?: Array<{ direction: string; distance: string }>;};
}// 地理编码响应结构
interface GeoResponse extends AMapResponse {geocodes: Array<{location: string;formatted_address: string;level: string;city: string;district: string;adcode: string;}>;
}// POI 搜索响应结构
interface POISearchResponse extends AMapResponse {pois: Array<{id: string;name: string;type: string;typecode: string;address: string;location: string;pname: string;cityname: string;adname: string;}>;
}// 输入提示响应结构
interface InputTipsResponse extends AMapResponse {tips: Array<{id: string;name: string;district: string;location: string;}>;
}// 距离计算响应结构
interface DistanceResponse extends AMapResponse {results: Array<{distance: string;duration: string;}>;
}// 工具类配置接口
interface AMapConfig {apiKey: string;baseUrl?: string;
}// 逆地理编码选项
interface RegeoOptions {radius?: number;extensions?: 'base' | 'all';poiType?: string;roadLevel?: number;batch?: boolean;
}// POI 搜索选项
interface POISearchOptions {page?: number;offset?: number;extensions?: 'base' | 'all';types?: string;
}class AMapService {private axiosInstance: AxiosInstance;private apiKey: string;private baseUrl: string;/*** 构造函数* @param config - 配置对象，包含 API Key 和可选的基础 URL*/constructor(config: AMapConfig) {this.apiKey = config.apiKey;this.baseUrl = config.baseUrl || 'https://restapi.amap.com/v3';// 初始化 Axios 实例this.axiosInstance = axios.create({baseURL: this.baseUrl,timeout: 10000,headers: {'Content-Type': 'application/json',},});}/*** 发起通用请求* @param endpoint - API 端点* @param params - 请求参数* @returns 请求结果* @private*/private async _request<T>(endpoint: string, params: Record<string, any> = {}): Promise<T> {const baseParams = {key: this.apiKey,output: 'JSON',};// 合并参数并移除空值const queryParams = { ...baseParams, ...params };Object.keys(queryParams).forEach((key) => {if (queryParams[key] === undefined || queryParams[key] === null) {delete queryParams[key];}});try {const response: AxiosResponse<T> = await this.axiosInstance.get(endpoint, { params: queryParams });const data = response.data;if (data.status !== '1') {throw new Error(`高德API错误: ${data.info} (错误码: ${data.infocode})`);}return data;} catch (error) {console.error(`高德地图请求失败 (${endpoint}):`, error);throw error;}}/*** 逆地理编码 - 根据经纬度获取地址信息* @param longitude - 经度* @param latitude - 纬度* @param options - 额外选项* @returns 地址信息*/async regeoCode(longitude: number, latitude: number, options: RegeoOptions = {}): Promise<{province: string;city: string;district: string;township: string;citycode: string;adcode: string;formattedAddress: string;pois: Array<{ id: string; name: string; address: string }>;roads: Array<{ id: string; name: string }>;roadinters: Array<{ direction: string; distance: string }>;rawData: RegeoResponse;}> {const params = {location: `${longitude},${latitude}`,radius: options.radius || 1000,extensions: options.extensions || 'base',poitype: options.poiType,roadlevel: options.roadLevel || 0,batch: options.batch || false,};const data = await this._request<RegeoResponse>('geocode/regeo', params);if (data.regeocode) {const addressComponent = data.regeocode.addressComponent;return {province: addressComponent.province,city: addressComponent.city || addressComponent.province, // 处理直辖市district: addressComponent.district,township: addressComponent.township,citycode: addressComponent.citycode,adcode: addressComponent.adcode,formattedAddress: data.regeocode.formatted_address,pois: data.regeocode.pois || [],roads: data.regeocode.roads || [],roadinters: data.regeocode.roadinters || [],rawData: data,};}throw new Error('未找到地址信息');}/*** 地理编码 - 根据地址描述获取经纬度* @param address - 地址描述* @param city - 城市限定（可选）* @returns 经纬度信息*/async geoCode(address: string, city: string | null = null): Promise<{longitude: number;latitude: number;formattedAddress: string;level: string;city: string;district: string;adcode: string;rawData: GeoResponse['geocodes'][0];}> {const params = { address, city };const data = await this._request<GeoResponse>('geocode/geo', params);if (data.geocodes && data.geocodes.length > 0) {const geocode = data.geocodes[0];const [longitude, latitude] = geocode.location.split(',').map(Number);return {longitude,latitude,formattedAddress: geocode.formatted_address,level: geocode.level,city: geocode.city,district: geocode.district,adcode: geocode.adcode,rawData: geocode,};}throw new Error('未找到对应的地理位置');}/*** 关键字搜索 POI（兴趣点）* @param keywords - 关键字* @param city - 城市限定* @param options - 额外选项* @returns POI 列表*/async searchPOI(keywords: string, city: string | null = null, options: POISearchOptions = {}): Promise<Array<{id: string;name: string;type: string;typecode: string;address: string;location: { longitude: number; latitude: number };pname: string;cityname: string;adname: string;rawData: POISearchResponse['pois'][0];}>> {const params = {keywords,city: city || '全国',page: options.page || 1,offset: options.offset || 20,extensions: options.extensions || 'base',types: options.types,};const data = await this._request<POISearchResponse>('place/text', params);if (data.pois && data.pois.length > 0) {return data.pois.map((poi) => ({id: poi.id,name: poi.name,type: poi.type,typecode: poi.typecode,address: poi.address,location: {longitude: parseFloat(poi.location.split(',')[0]),latitude: parseFloat(poi.location.split(',')[1]),},pname: poi.pname,cityname: poi.cityname,adname: poi.adname,rawData: poi,}));}return [];}/*** 输入提示（自动完成）* @param keywords - 关键词* @param city - 城市限定* @returns 提示列表*/async inputTips(keywords: string, city: string | null = null): Promise<Array<{id: string;name: string;district: string;location: string;}>> {const params = {keywords,city: city || '全国',type: 'all',};const data = await this._request<InputTipsResponse>('assistant/inputtips', params);return data.tips || [];}/*** 批量逆地理编码（最多 20 个点）* @param locations - 经纬度数组 [{longitude, latitude}, ...]* @returns 批量结果*/async batchRegeoCode(locations: Array<{ longitude: number; latitude: number }>): Promise<RegeoResponse['regeocode'][]> {if (!Array.isArray(locations) || locations.length === 0) {throw new Error('位置数组不能为空');}if (locations.length > 20) {throw new Error('批量查询最多支持 20 个点');}const locationStr = locations.map((loc) => `${loc.longitude},${loc.latitude}`).join('|');const data = await this._request<RegeoResponse>('geocode/regeo', {location: locationStr,batch: true,});return data.regeocodes || [];}/*** 计算两点间距离* @param lng1 - 起点经度* @param lat1 - 起点纬度* @param lng2 - 终点经度* @param lat2 - 终点纬度* @returns 距离信息（米）*/async calculateDistance(lng1: number, lat1: number, lng2: number, lat2: number): Promise<{distance: number;duration: number;}> {const data = await this._request<DistanceResponse>('distance', {origins: `${lng1},${lat1}`,destination: `${lng2},${lat2}`,type: 1, // 直线距离});if (data.results && data.results.length > 0) {return {distance: parseInt(data.results[0].distance),duration: parseInt(data.results[0].duration),};}throw new Error('距离计算失败');}
}// 单例模式
let amapInstance: AMapService | null = null;/*** 初始化高德地图服务* @param apiKey - API Key* @returns 服务实例*/
export function initAMapService(apiKey: string): AMapService {if (!amapInstance) {amapInstance = new AMapService({ apiKey });}return amapInstance;
}/*** 获取高德地图服务实例* @returns 服务实例*/
export function getAMapService(): AMapService {if (!amapInstance) {throw new Error('请先调用 initAMapService 初始化');}return amapInstance;
}export default AMapService;

使用说明

  1. 申请 API Key：在高德地图开放平台（https://lbs.amap.com/）注册并申请 Web 服务 API Key。
  2. 安装依赖：
    • 确保项目中已安装 axios 和 TypeScript：npm install axios typescript.
    • 在 tsconfig.json 中启用 esModuleInterop 和 strict 选项以确保类型安全。
  3. 初始化服务：

    typescript

    import { initAMapService } from './AMapService';const amapService = initAMapService('您的API_KEY');
  4. 功能调用示例：
    • 逆地理编码：

      typescript

      const addressInfo = await amapService.regeoCode(116.480881, 39.989410, { extensions: 'all' });
console.log(addressInfo.formattedAddress, addressInfo.addressComponent);
    • 地理编码：

      typescript

      const geoInfo = await amapService.geoCode('北京市朝阳区望京街', '北京');
console.log(geoInfo.longitude, geoInfo.latitude);
    • POI 搜索：

      typescript

      const pois = await amapService.searchPOI('咖啡', '北京', { page: 1, offset: 10 });
console.log(pois);
    • 输入提示：

      typescript

      const tips = await amapService.inputTips('故宫', '北京');
console.log(tips);
    • 批量逆地理编码：

      typescript

      const locations = [{ longitude: 116.480881, latitude: 39.989410 },{ longitude: 116.481026, latitude: 39.989614 },
];
const batchResult = await amapService.batchRegeoCode(locations);
console.log(batchResult);
    • 距离计算：

      typescript

      const distanceInfo = await amapService.calculateDistance(116.480881, 39.989410, 116.481026, 39.989614);
console.log(distanceInfo.distance, distanceInfo.duration);

文章转载自：

http://pXGLoOX2.sjbpg.cn
http://ONqxoPkc.sjbpg.cn
http://TtyM3xz1.sjbpg.cn
http://PKTzLFJa.sjbpg.cn
http://tA8lRB9a.sjbpg.cn
http://NwhrcRhN.sjbpg.cn
http://p1ypXrLO.sjbpg.cn
http://1A4MDTJb.sjbpg.cn
http://6vS4OGgf.sjbpg.cn
http://toX2xqpV.sjbpg.cn
http://VvYz3ufv.sjbpg.cn
http://KpK7Wp3Q.sjbpg.cn
http://rENEwvd9.sjbpg.cn
http://u5b9HoEp.sjbpg.cn
http://hRCtWhfY.sjbpg.cn
http://YDH8c1LC.sjbpg.cn
http://tx0x3yvM.sjbpg.cn
http://5ijef4Iq.sjbpg.cn
http://tSCenYSj.sjbpg.cn
http://Jysd569z.sjbpg.cn
http://qGNhR4th.sjbpg.cn
http://wDphI3ux.sjbpg.cn
http://EAt7BoYP.sjbpg.cn
http://i0GAQTaw.sjbpg.cn
http://f0gV9o0I.sjbpg.cn
http://t151ReFu.sjbpg.cn
http://VVa32I73.sjbpg.cn
http://WUVNU8kA.sjbpg.cn
http://QmlUYJBl.sjbpg.cn
http://zFOF85eX.sjbpg.cn
http://www.dtcms.com/a/373871.html

相关文章：

  • Elixir通过Onvif协议控制IP摄像机，ExOnvif库给视频流叠加字符
  • GEM5学习(5): ARM 架构功耗仿真
  • TCP 拥塞控制与四次挥手解析
  • Linux 进程深度解析：从底层架构到虚拟地址空间
  • 软件测试之测试分类（沉淀中）
  • 使用Postfix+Dovecot+数据库+Web界面搭建邮件服务器详细指南
  • ubuntu 安装 docker 详细步骤
  • 无外部依赖！学习这款Qt6 SSH/SFTP客户端
  • Agentic RL Survey: 从被动生成到自主决策
  • AFE和电流传感器的区别
  • 【springboot+vue】高校迎新平台管理系统（源码+文档+调试+基础修改+答疑）
  • HTTP 请求体格式详解
  • CyberPoC 是一个现代化的网络安全练习和竞赛平台，支持容器化部署的安全挑战，为用户提供实践网络安全技能的环境。
  • Mybatis Log Plugin打印日志，会导致CPU升高卡死
  • 并发编程原理与实战（二十七）深入剖析synchronized底层基石ObjectMonitor与对象头Mark Word
  • 国产化Word处理组件Spire.DOC教程：使用 Python 将 Markdown 转换为 HTML 的详细教程
  • CanMV K230 2025年度计划
  • 简单视频转换器 avi转mp4
  • 如何修改不同城市IP查询排名以增强广告投放效果
  • 04-Redis 启动与停止：服务管理全攻略（含命令行与图形化操作）
  • LangChain: Agent（代理）
  • 使用 BatchRendererGroup 创建渲染器
  • flutter鸿蒙：使用flutter_local_notifications实现本地通知
  • Redis中数据类型详解
  • CentOS 7安装最新nginx
  • 解决Win11 安全中心删掉存在隐患的工具
  • 二级缓存在实际项目中的应用
  • 第14篇：循环神经网络（RNN）与LSTM：序列建模的利器
  • 【P02_AI大模型之调用LLM的方式】
  • 浅谈Go 语言开发 AI Agent