调整地图居中

src/views/User/cadmiumPrediction/CropCadmiumPrediction.vue

@@ -201,6 +201,9 @@ export default {
     this.fetchLatestResults();
     this.fetchStatistics();
     this.initTownshipMap();
+    
+    // 添加窗口调整事件监听
+    window.addEventListener('resize', this.handleResize);
   },
 
   beforeDestroy() {
@@ -211,6 +214,9 @@ export default {
       this.townshipMapInstance.dispose();
       this.townshipMapInstance = null;
     }
+    
+    // 移除窗口调整事件监听
+    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
     // 触发文件选择
@@ -397,7 +403,9 @@ export default {
         this.loadingTownshipMap = true;
         // 步骤1：加载本地 GeoJSON 边界文件
         await this.loadLocalGeoJson();
-        // 步骤2：渲染边界地图（不关联接口数据）
+        // 步骤2：等待DOM更新完成
+        await this.$nextTick();
+        // 步骤3：渲染边界地图（不关联接口数据）
         this.renderTownshipMap();
       } catch (error) {
         console.error('乡镇边界加载失败:', error);
@@ -552,10 +560,12 @@ export default {
       // 5. 渲染地图
       this.townshipMapInstance.setOption(option);
 
-      // 6. 监听窗口 resize（地图自适应）
-      window.addEventListener('resize', () => {
-        this.townshipMapInstance && this.townshipMapInstance.resize();
-      });
+      // 6. 关键修复：添加延迟resize确保地图正确渲染
+      setTimeout(() => {
+        if (this.townshipMapInstance) {
+          this.townshipMapInstance.resize();
+        }
+      }, 100);
     },
     
     // 上传并计算
@@ -732,7 +742,9 @@ export default {
     
     // 处理窗口大小变化
     handleResize() {
-      if (this.distributionChart) this.distributionChart.resize();
+      if (this.townshipMapInstance) {
+        this.townshipMapInstance.resize();
+      }
     },
   }
 };
@@ -750,17 +762,6 @@ export default {
   box-sizing: border-box;
 }
 
-/* 新增：乡镇地图样式 */
-.township-map-section {
-  background-color: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  padding: 15px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  position: relative;
-  min-height: 500px; /* 与原有地图高度一致 */
-  backdrop-filter: blur(5px);
-  margin-bottom: 20px; /* 与下方地图间距 */
-}
 
 .township-map-container {
   width: 90%; /* 使用百分比宽度 */