146 lines
3.6 KiB
TypeScript
146 lines
3.6 KiB
TypeScript
/**
|
||
* 高德地图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<any> 返回AMap对象或null（占位模式）
|
||
*/
|
||
export const loadAMapScript = (): Promise<any> => {
|
||
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 {}; |