fix: 修复地图高度自适应和重载问题

src/views/home/index.vue

@@ -196,7 +196,7 @@
         </div>
         <div class="center_box">
           <div class="map_box" ref="mapBoxRef">
-            <MapDemo></MapDemo>
+            <MapDemo :mapHeight="mapHeight"></MapDemo>
           </div>
           <div class="lessee_box">
             <div class="header">
@@ -476,7 +476,9 @@
     },
     created() {
       setTimeout(() => {
-        this.$refs.barRef.resize();
+        this.$nextTick(() => {
+          this.$refs.barRef.resize();
+        });
       }, 300);
     },
     watch: {

src/views/home/map.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="map" id="container"></div>
+  <div class="map" id="container" :style="{height:mapHeight + 'px'}"></div>
 </template>
 <script>
   import AMapLoader from '@amap/amap-jsapi-loader';
   export default {
+    props: {
+      mapHeight: {
+        type: Number,
+        default: 650
+      }
+    },
     data() {
       return {
+        mapInstance: null,
         markers: [
           {
             position: [116.397428, 39.90923],
@@ -30,8 +37,31 @@
         ]
       };
     },
+    watch: {
+      mapHeight(v) {
+        console.log(v,'dsds')
+        this.$nextTick(() => {
+          this.reloadMap();
+        });
+      }
+    },
     methods: {
+      reloadMap() {
+        console.log('Reloading map...');
+        if (this.mapInstance) {
+          this.mapInstance.destroy();
+          this.mapInstance = null;
+          const container = document.getElementById('container');
+          if (container) {
+            container.innerHTML = '';
+          }
+        }
+        this.mapInit();
+      },
       mapInit() {
+        const container = document.getElementById('container');
+        if (!container) return;
+
         window._AMapSecurityConfig = {
           securityJsCode: 'd60df9c6f47866f10b465156ca098ca4'
         };
@@ -51,6 +81,8 @@
               zooms: [2, 20], //地图显示的缩放级别范围
               center: [112.889159, 28.213475] //初始地图中心经纬度
             }); //"container"为 <div> 容器的 id
+            this.mapInstance = map;
+            // 使用 map.setFitView() 或让地图自动适应容器大小
             // 开启卫星图模式
             let layers = new AMap.TileLayer.Satellite({ map: map });
             layers && layers.show();
@@ -134,7 +166,8 @@
 <style lang="scss" scoped>
   .map {
     width: 100%;
-    height: 100%;
+    height: v-bind(mapHeight + 'px');
+    min-height: 650px;
     background: #fff;
     position: absolute;
   }