/**
* 高德地图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 {};