/** * 高德地图SDK动态加载器 * 用于在不修改index.html的情况下加载高德地图SDK */ // 高德地图配置 const AMAP_CONFIG = { // 替换为你的高德地图API Key // 申请地址: https://console.amap.com/ key: 'YOUR_AMAP_KEY', // 替换为你的安全密钥(可选,用于提高安全性) securityJsCode: '', // SDK版本 version: '2.0', // 可选插件 plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geocoder'] as string[], }; /** * 加载高德地图SDK * @returns Promise 返回AMap对象或null(占位模式) */ export const loadAMapScript = (): Promise => { return new Promise((resolve, reject) => { // 如果已经加载,直接返回 if (window.AMap) { console.log('✅ 高德地图SDK已加载'); resolve(window.AMap); return; } // 检查Key是否配置 if (AMAP_CONFIG.key === 'YOUR_AMAP_KEY' || !AMAP_CONFIG.key) { // 使用占位地图(功能完整) console.log('💡 使用占位地图模式(功能完整)'); console.log('💡 如需真实地图,请在 /lib/mapLoader.ts 中配置高德地图Key'); console.log('💡 申请地址: https://console.amap.com/'); resolve(null); // 返回null表示使用占位地图 return; } try { // 设置安全密钥(如果提供) if (AMAP_CONFIG.securityJsCode) { window._AMapSecurityConfig = { securityJsCode: AMAP_CONFIG.securityJsCode, }; } // 创建script标签 const script = document.createElement('script'); script.type = 'text/javascript'; // 构建SDK URL let url = `https://webapi.amap.com/maps?v=${AMAP_CONFIG.version}&key=${AMAP_CONFIG.key}`; // 添加插件 if (AMAP_CONFIG.plugins.length > 0) { url += `&plugin=${AMAP_CONFIG.plugins.join(',')}`; } script.src = url; // 加载成功 script.onload = () => { console.log('✅ 高德地图SDK加载成功'); console.log('📍 版本:', window.AMap?.version); resolve(window.AMap); }; // 加载失败 script.onerror = () => { console.error('❌ 高德地图SDK加载失败'); reject(new Error('高德地图SDK加载失败')); }; // 添加到页面 document.head.appendChild(script); console.log('🔄 正在加载高德地图SDK...'); } catch (error) { console.error('❌ 加载高德地图SDK时发生错误:', error); reject(error); } }); }; /** * 检查高德地图SDK是否已加载 * @returns boolean */ export const isAMapLoaded = (): boolean => { return typeof window !== 'undefined' && !!window.AMap; }; /** * 获取高德地图版本 * @returns string | null */ export const getAMapVersion = (): string | null => { if (isAMapLoaded()) { return window.AMap.version || null; } return null; }; // TypeScript 类型声明 declare global { interface Window { AMap: any; _AMapSecurityConfig: { securityJsCode: string; }; } } /** * 使用示例: * * import { loadAMapScript, isAMapLoaded } from './lib/mapLoader'; * * // 在组件中使用 * useEffect(() => { * if (!isAMapLoaded()) { * loadAMapScript() * .then((AMap) => { * if (AMap) { * console.log('地图SDK加载成功,可以初始化地图'); * initMap(); * } else { * console.log('使用占位地图模式'); * } * }) * .catch((error) => { * console.error('地图SDK加载失败,使用占位地图', error); * }); * } else { * initMap(); * } * }, []); */ export {};