diff --git a/src/views/component/map/components/TencentMap.vue b/src/views/component/map/components/TencentMap.vue
index 348166b4..8d6ef850 100644
--- a/src/views/component/map/components/TencentMap.vue
+++ b/src/views/component/map/components/TencentMap.vue
@@ -1,16 +1,22 @@
 <template>
-  <div ref="domRef" class="w-full max-h-480px"></div>
+  <div ref="wrapRef" class="w-full h-full">
+    <div ref="domRef" class="dom-ref-height"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useScriptTag } from '@vueuse/core';
+import { ref, computed, onMounted } from 'vue';
+import { useScriptTag, useElementSize } from '@vueuse/core';
 import { TENCENT_MAP_SDK_URL } from '@/settings';
 
 const { load } = useScriptTag(TENCENT_MAP_SDK_URL);
 
+const wrapRef = ref<HTMLDivElement | null>(null);
 const domRef = ref<HTMLDivElement | null>(null);
 
+const { height: wrapRefHeight } = useElementSize(wrapRef);
+const domRefHeight = computed(() => `${wrapRefHeight.value}px`);
+
 async function renderBaiduMap() {
   await load(true);
   const map = new TMap.Map(domRef.value!, {
@@ -26,4 +32,8 @@ onMounted(() => {
   renderBaiduMap();
 });
 </script>
-<style scoped></style>
+<style scoped>
+.dom-ref-height {
+  height: v-bind(domRefHeight);
+}
+</style>