diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f68822d..abd3601 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -7,21 +7,28 @@
 import guadmap from './map/index.vue'
 import useWebsocketStore from '@/store/modules/websocket'
 const websocket = useWebsocketStore()
+// 页面高度
 const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
 window.addEventListener('resize', () => {
   const bodyHeight = document.body.clientHeight - 50
   mainHeight.value = bodyHeight
 })
+const loading = ref(true)
+const offLoading = () => {
+  loading.value = false
+}
 onMounted(() => {
+  loading.value = true
   // 连接websocket
   // websocket.initWebSocket()
 })
 </script>
 
 <template>
-  <div :style="{ height: `${mainHeight}px` }" class="container-dashboard">
+  <div  :style="{ height: `${mainHeight}px` }" class="container-dashboard">
     <!-- 地图 -->
-    <guadmap />
+    <guadmap :onload="offLoading" />
   </div>
 </template>
 

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f68822d..abd3601 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -7,21 +7,28 @@
 import guadmap from './map/index.vue'
 import useWebsocketStore from '@/store/modules/websocket'
 const websocket = useWebsocketStore()
+// 页面高度
 const mainHeight = ref(document.body.clientHeight - 50)
+// 高度随页面resize变化
 window.addEventListener('resize', () => {
   const bodyHeight = document.body.clientHeight - 50
   mainHeight.value = bodyHeight
 })
+const loading = ref(true)
+const offLoading = () => {
+  loading.value = false
+}
 onMounted(() => {
+  loading.value = true
   // 连接websocket
   // websocket.initWebSocket()
 })
 </script>
 
 <template>
-  <div :style="{ height: `${mainHeight}px` }" class="container-dashboard">
+  <div  :style="{ height: `${mainHeight}px` }" class="container-dashboard">
     <!-- 地图 -->
-    <guadmap />
+    <guadmap :onload="offLoading" />
   </div>
 </template>
 
diff --git a/src/views/dashboard/map/index.vue b/src/views/dashboard/map/index.vue
index 1fa370b..76b90ed 100644
--- a/src/views/dashboard/map/index.vue
+++ b/src/views/dashboard/map/index.vue
@@ -5,6 +5,7 @@
  -->
 <script lang="ts" setup name="GuadMap">
 import AMapLoader from '@amap/amap-jsapi-loader'
+const loading = ref(true)
 // 设置安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
@@ -118,12 +119,19 @@
       // })
       // polyline.setMap(map.value)
       // map.value.add(polyline)
+      // 地图图块加载完成后触发
+      map.value.on('complete', () => {
+        //  修改loading状态
+        console.log('地图加载完成')
+        loading.value = false
+      })
     })
     .catch((e) => {
       console.log(e)
     })
 }
 onMounted(() => {
+  loading.value = true
   initMap()
 })
 onBeforeUnmount(() => {
@@ -134,7 +142,7 @@
 </script>
 
 <template>
-  <div id="map" />
+  <div id="map" v-loading="loading"/>
 </template>
 
 <style scoped>