生产管理系统前端 - 更新瓦力提交的产品原型到参考目录

src/lib/mapLoader.ts

@@ -0,0 +1,127 @@
+/**
+ * 高德地图SDK动态加载器
+ * 用于在不修改index.html的情况下加载高德地图SDK
+ */
+
+// 高德地图配置
+const AMAP_CONFIG = {
+  // 替换为你的高德地图API Key
+  // 申请地址: https://console.amap.com/
+  key: 'YOUR_AMAP_KEY',
+  
+  // 替换为你的安全密钥
+  securityJsCode: 'YOUR_SECURITY_JS_CODE',
+  
+  // SDK版本
+  version: '2.0',
+  
+  // 可选插件
+  plugins: [] 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') {
+      // 使用占位地图（功能完整）
+      console.log('💡 使用占位地图模式（功能完整）');
+      console.log('💡 如需真实地图，请查看 /MAP_SDK_QUICK_FIX.md');
+      resolve(null); // 返回null表示使用占位地图
+      return;
+    }
+
+    try {
+      // 设置安全密钥
+      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();
+      };
+
+      // 加载失败
+      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;
+};
+
+/**
+ * 使用示例:
+ * 
+ * import { loadAMapScript, isAMapLoaded } from './lib/mapLoader';
+ * 
+ * // 在组件中使用
+ * useEffect(() => {
+ *   if (!isAMapLoaded()) {
+ *     loadAMapScript()
+ *       .then(() => {
+ *         console.log('地图SDK加载成功，可以初始化地图');
+ *         initMap();
+ *       })
+ *       .catch((error) => {
+ *         console.error('地图SDK加载失败，使用占位地图', error);
+ *       });
+ *   } else {
+ *     initMap();
+ *   }
+ * }, []);
+ */