feat(map): 添加地图加载状态管理和错误处理功能

重构地图组件，增加加载状态管理和错误处理机制： 1. 添加加载中和错误状态UI展示 2. 实现带指数退避的重试机制 3. 优化错误信息提示 4. 清理未使用的组件导入

feat(map): 添加地图加载状态管理和错误处理功能
重构地图组件，增加加载状态管理和错误处理机制： 1. 添加加载中和错误状态UI展示 2. 实现带指数退避的重试机制 3. 优化错误信息提示 4. 清理未使用的组件导入
hookehuyr
Commit 5ebed07564c143dc7afe478a6e17311f5a10458e 5ebed075 1 parent 1a3d426e
Showing 4 changed files with 272 additions and 116 deletions
.eslintrc-auto-import.json
components.d.ts
src/auto-imports.d.ts
src/views/checkin/map.vue
--- a/.eslintrc-auto-import.json
View file @5ebed07
+++ b/.eslintrc-auto-import.json
View file @5ebed07
 {
   "globals": {
     "EffectScope": true,
-    "ElMessage": true,
     "computed": true,
     "createApp": true,
     "customRef": true,
--- a/components.d.ts
View file @5ebed07
+++ b/components.d.ts
View file @5ebed07
@@ -13,10 +13,6 @@ declare module '@vue/runtime-core' {
     AudioBackground1: typeof import('./src/components/audioBackground1.vue')['default']
     AudioList: typeof import('./src/components/audioList.vue')['default']
     BottomNav: typeof import('./src/components/BottomNav.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     Floor: typeof import('./src/components/Floor/index.vue')['default']
     InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
     InfoPopupLite: typeof import('./src/components/InfoPopupLite.vue')['default']
@@ -28,25 +24,9 @@ declare module '@vue/runtime-core' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/Floor/svgIcon.vue')['default']
-    VanBackTop: typeof import('vant/es')['BackTop']
-    VanButton: typeof import('vant/es')['Button']
-    VanCol: typeof import('vant/es')['Col']
-    VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanDialog: typeof import('vant/es')['Dialog']
-    VanField: typeof import('vant/es')['Field']
-    VanFloatingPanel: typeof import('vant/es')['FloatingPanel']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
-    VanImagePreview: typeof import('vant/es')['ImagePreview']
-    VanOverlay: typeof import('vant/es')['Overlay']
     VanPopup: typeof import('vant/es')['Popup']
-    VanRow: typeof import('vant/es')['Row']
-    VanSlider: typeof import('vant/es')['Slider']
-    VanSwipe: typeof import('vant/es')['Swipe']
-    VanSwipeItem: typeof import('vant/es')['SwipeItem']
-    VanTab: typeof import('vant/es')['Tab']
-    VanTabs: typeof import('vant/es')['Tabs']
-    VanToast: typeof import('vant/es')['Toast']
     VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
   }
 }
--- a/src/auto-imports.d.ts
View file @5ebed07
+++ b/src/auto-imports.d.ts
View file @5ebed07
@@ -2,7 +2,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
--- a/src/views/checkin/map.vue
View file @5ebed07
+++ b/src/views/checkin/map.vue
View file @5ebed07
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-21 19:03:12
+ * @LastEditTime: 2025-09-25 21:54:49
  * @FilePath: /map-demo/src/views/checkin/map.vue
  * @Description: 公众地图主体页面
 -->
 <template>
   <div ref="root" :style="{ height: mapHeight, position: 'relative', overflow: 'hidden' }">
+    <!-- 地图加载状态提示 -->
+    <div v-if="mapLoadingState.isLoading" class="map-loading-overlay">
+      <div class="loading-content">
+        <van-loading size="24px" color="#DD7850">地图加载中...</van-loading>
+        <p class="loading-text">正在初始化地图，请稍候</p>
+      </div>
+    </div>
+
+    <!-- 地图加载错误提示 -->
+    <div v-if="mapLoadingState.isError" class="map-error-overlay">
+      <div class="error-content">
+        <van-icon name="warning-o" size="48px" color="#ff4444" />
+        <p class="error-title">地图加载失败</p>
+        <p class="error-message">{{ mapLoadingState.errorMessage }}</p>
+        <van-button
+          type="primary"
+          color="#DD7850"
+          @click="retryLoadMap"
+          :loading="mapLoadingState.isLoading"
+        >
+          重新加载
+        </van-button>
+      </div>
+    </div>
+
     <div id="container"></div>
     <!-- 添加导航面板容器 -->
     <div id="walking-panel" style="position: absolute; bottom: 1rem; left: 1rem; padding: 1rem;"></div>
@@ -304,6 +329,14 @@ export default {
         floatingPanelBorderRadius: '1.25rem'
       },
       showClose: false,
+      // 地图加载状态管理
+      mapLoadingState: {
+        isLoading: true,
+        isError: false,
+        errorMessage: '',
+        retryCount: 0,
+        maxRetries: 3
+      },
       markerStyle2: { // 选中
         //设置文本样式，Object 同 css 样式表
         "padding": ".5rem .2rem .5rem .2rem",
@@ -405,102 +438,44 @@ export default {
       store.keepPages.push('CheckinMap');
     }
-    const AMap = await AMapLoader.load({
+    // 开始加载地图
-      key: '17b8fc386104b89db88b60b049a6dbce', // 控制台获取
+    this.mapLoadingState.isLoading = true;
-      version: '2.0', // 指定API版本
+    this.mapLoadingState.isError = false;
-      plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']    // 必须加载步行导航插件
+
-    })
+    try {
-    const code = this.$route.query.id;
+      await this.initializeMapWithRetry();
-    const { data } = await mapAPI({ i: code });
+    } catch (error) {
-    this.navBarList = data.list; // 底部导航条
+      console.error('地图初始化失败:', error);
-    this.mapTiles = data.level; // 获取图层
+      this.handleMapLoadError(error);
-    this.navKey = data.list.length ? data.list[0]['id'] : 0; // 默认选中 第一个 id
-    this.navList = data.list.length ? data.list.filter(item => item.id === this.navKey)[0]['list'] : []; // 返回默认选中项的实体信息
-    this.data_center = data.map.center.map(item => Number(item)); // 地图中心点
-    this.data_zoom = data.map.zoom; // 地图默认缩放
-    this.data_rotation = data.map.rotation; // 地图旋转角度
-    this.data_zooms = data.map.zooms.map(item => Number(item)); // 地图默认缩放范围
-    this.data_paths = data.map.path ? data.map.path : {}; // 地图默认导航路径
-    this.data_logo = data.map.map_logo ? data.map.map_logo : ''; // 地图logo
-    this.point_range = data.map.map_range ? data.map.map_range : []; // 地图定位范围
-    if (data.map.map_layers) { // 地图默认图层
-      if (data.map.map_layers === 'satellite') { // 卫星和路网
-        this.data_layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
-      } else { // 平面图
-        this.data_layers = [];
-      }
-    }
-    if (data.map.path) {
-      for (const key in data.map.path) {
-        const element = data.map.path[key];
-        this.data_path_list.push({
-          name: key,
-          path: element,
-          status: true
-        })
-      }
-    }
-    // 地图标题
-    document.title = data.map.map_title;
-    // 微信分享
-    const shareData = {
-      title: data.map.map_title, // 分享标题
-      desc: '别院地图', // 分享描述
-      link: location.origin + location.pathname + location.hash, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
-      imgUrl: '', // 分享图标
-      success: function () {
-        // console.warn('设置成功');
-      }
     }
-    // 分享好友（微信好友或qq好友）
-    wx.updateAppMessageShareData(shareData);
-    // 分享到朋友圈或qq空间
-    wx.updateTimelineShareData(shareData);
-    // 分享到腾讯微博
-    wx.onMenuShareWeibo(shareData);
-    // 初始化地图
-    this.initMap();
-    // this.setMapBoundary();
-    // 使用之前获取当前地址，判断当前是否能够获取经纬度
-    // wx.getLocation({
-    //   type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
-    //   success: (res) => {
-    //     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
-    //     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
-    //     var speed = res.speed; // 速度，以米/每秒计
-    //     var accuracy = res.accuracy; // 位置精度
-    //     this.current_lng = GPS.gcj_encrypt(latitude, longitude).lon;
-    //     this.current_lat = GPS.gcj_encrypt(latitude, longitude).lat;
-    //   },
-    // });
-    // 设置贴片地图
-    this.setTitleLayer();
-    // 地图标题
-    document.title = data.map.map_title;
-    //
-    // setTimeout(() => {
-    //   this.info_height = (0.5 * window.innerHeight);
-    //   // 浮动面板样式
-    //   $('.van-floating-panel__content').css('borderRadius', '1.5rem');
-    // }, 2000);
-    // 初始化步行导航插件时指定面板容器
-    this.walking = new AMap.Walking({
-      map: this.map,
-      // panel: 'walking-panel', // 必须指定存在的DOM元素ID
-      hideMarkers: false, // 设置隐藏路径规划的起始点图标
-      isOutline: true, // 使用map属性时，绘制的规划线路是否显示描边
-      autoFitView: true, // 是否自动调整地图视野到显示的路线
-    });
   },
   // keep-alive 组件激活时调用
   activated() {
-    // 组件被激活时，不需要重新初始化地图，保持之前的状态
+    // 组件被激活时，检查地图是否已经初始化
-    console.log('地图组件已激活，保持之前状态');
+    console.log('地图组件已激活');
+
     // 确保当前页面在缓存列表中
     const store = mainStore();
     if (!store.keepPages.includes('CheckinMap')) {
       store.keepPages.push('CheckinMap');
     }
+
+    // 如果地图还未初始化或加载失败，重新尝试加载
+    if (!this.map || this.mapLoadingState.isError) {
+      console.log('地图未初始化或加载失败，重新加载');
+      this.mapLoadingState.isLoading = true;
+      this.mapLoadingState.isError = false;
+      this.initializeMapWithRetry().catch(error => {
+        console.error('重新激活时地图加载失败:', error);
+        this.handleMapLoadError(error);
+      });
+    } else {
+      // 地图已经初始化，重新设置地图大小以适应容器
+      this.$nextTick(() => {
+        this.map.getSize();
+      });
+    }
+
     // 重置page-info组件状态，关闭浮动面板
     this.info_height = 0;
     this.itemInfo = {};
@@ -511,12 +486,6 @@ export default {
       // 还原标记点样式
       this.resetMarkStyle();
     });
-    // 如果地图已经初始化，重新设置地图大小以适应容器
-    if (this.map) {
-      this.$nextTick(() => {
-        this.map.getSize();
-      });
-    }
   },
   // keep-alive 组件停用时调用
   deactivated() {
@@ -539,6 +508,151 @@ export default {
   methods: {
     ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
     /**
+     * 计算重试延迟时间（指数退避算法）
+     * @param {number} retryCount - 当前重试次数
+     * @returns {number} 延迟时间（毫秒）
+     */
+    calculateRetryDelay(retryCount) {
+      // 基础延迟时间：1秒，每次重试翻倍，最大不超过10秒
+      const baseDelay = 1000;
+      const maxDelay = 10000;
+      const delay = Math.min(baseDelay * Math.pow(2, retryCount), maxDelay);
+      // 添加随机抖动，避免所有用户同时重试
+      const jitter = Math.random() * 0.3 * delay;
+      return delay + jitter;
+    },
+
+    /**
+     * 重试加载地图
+     */
+    async retryLoadMap() {
+      if (this.mapLoadingState.retryCount >= this.mapLoadingState.maxRetries) {
+        this.mapLoadingState.errorMessage = '已达到最大重试次数，请稍后再试';
+        return;
+      }
+
+      this.mapLoadingState.isLoading = true;
+      this.mapLoadingState.isError = false;
+      this.mapLoadingState.retryCount++;
+
+      // 计算延迟时间
+      const delay = this.calculateRetryDelay(this.mapLoadingState.retryCount - 1);
+
+      try {
+        // 等待延迟时间
+        await new Promise(resolve => setTimeout(resolve, delay));
+
+        // 重新初始化地图
+        await this.initializeMapWithRetry();
+      } catch (error) {
+        console.error('重试加载地图失败:', error);
+        this.handleMapLoadError(error);
+      }
+    },
+
+    /**
+     * 处理地图加载错误
+     * @param {Error} error - 错误对象
+     */
+    handleMapLoadError(error) {
+      this.mapLoadingState.isLoading = false;
+      this.mapLoadingState.isError = true;
+
+      // 根据错误类型设置不同的错误信息
+      if (error.message && error.message.includes('quota')) {
+        this.mapLoadingState.errorMessage = '地图服务繁忙，请稍后重试';
+      } else if (error.message && error.message.includes('network')) {
+        this.mapLoadingState.errorMessage = '网络连接异常，请检查网络后重试';
+      } else {
+        this.mapLoadingState.errorMessage = '地图加载失败，请重试';
+      }
+    },
+
+    /**
+     * 带重试机制的地图初始化
+     */
+    async initializeMapWithRetry() {
+      try {
+        const AMap = await AMapLoader.load({
+          key: '17b8fc386104b89db88b60b049a6dbce',
+          version: '2.0',
+          plugins: ['AMap.ElasticMarker','AMap.ImageLayer','AMap.ToolBar','AMap.IndoorMap','AMap.Walking','AMap.Geolocation']
+        });
+
+        // 获取地图数据
+        const code = this.$route.query.id;
+        const { data } = await mapAPI({ i: code });
+
+        // 设置地图数据
+        this.navBarList = data.list;
+        this.mapTiles = data.level;
+        this.navKey = data.list.length ? data.list[0]['id'] : 0;
+        this.navList = data.list.length ? data.list.filter(item => item.id === this.navKey)[0]['list'] : [];
+        this.data_center = data.map.center.map(item => Number(item));
+        this.data_zoom = data.map.zoom;
+        this.data_rotation = data.map.rotation;
+        this.data_zooms = data.map.zooms.map(item => Number(item));
+        this.data_paths = data.map.path ? data.map.path : {};
+        this.data_logo = data.map.map_logo ? data.map.map_logo : '';
+        this.point_range = data.map.map_range ? data.map.map_range : [];
+
+        if (data.map.map_layers) {
+          if (data.map.map_layers === 'satellite') {
+            this.data_layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
+          } else {
+            this.data_layers = [];
+          }
+        }
+
+        if (data.map.path) {
+          for (const key in data.map.path) {
+            const element = data.map.path[key];
+            this.data_path_list.push({
+              name: key,
+              path: element,
+              status: true
+            });
+          }
+        }
+
+        // 设置页面标题
+        document.title = data.map.map_title;
+
+        // 微信分享配置
+        const shareData = {
+          title: data.map.map_title,
+          desc: '别院地图',
+          link: location.origin + location.pathname + location.hash,
+          imgUrl: '',
+          success: function () {}
+        };
+        wx.updateAppMessageShareData(shareData);
+        wx.updateTimelineShareData(shareData);
+        wx.onMenuShareWeibo(shareData);
+
+        // 初始化地图
+        this.initMap();
+        this.setTitleLayer();
+
+        // 初始化步行导航
+        this.walking = new AMap.Walking({
+          map: this.map,
+          hideMarkers: false,
+          isOutline: true,
+          autoFitView: true,
+        });
+
+        // 地图加载成功
+        this.mapLoadingState.isLoading = false;
+        this.mapLoadingState.isError = false;
+        this.mapLoadingState.retryCount = 0;
+
+      } catch (error) {
+        console.error('地图初始化失败:', error);
+        throw error; // 重新抛出错误，让调用方处理
+      }
+    },
+    /**
      * 创建标记点的HTML内容，包含图标和文字
      * @param {Object} entityInfo - 实体信息
      * @param {String} textDirection - 文字方向 ('vertical' 或 'horizontal')
@@ -1510,4 +1624,68 @@ export default {
 .van-floating-panel__header-bar {
   background: none;
 }
+
+/* 地图加载状态样式 */
+.map-loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.loading-text {
+  margin-top: 1rem;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+/* 地图加载错误状态样式 */
+.map-error-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.95);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.error-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem;
+  max-width: 300px;
+}
+
+.error-title {
+  margin: 1rem 0 0.5rem 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.error-message {
+  margin: 0.5rem 0 1.5rem 0;
+  color: #666;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
 </style>