弹出框详情样式调整

 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-06-02 17:37:17
+ * @LastEditTime: 2023-06-05 11:38:09
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div style="height: 100vh; position: relative; overflow: hidden;">
+  <div ref="root" style="height: 100vh; position: relative; overflow: hidden;">
     <div id="container"></div>
     <div class="nav-bar-wrapper">
       <div class="hideScrollBar"
@@ -92,7 +92,7 @@
 
     <!-- 自定义组件InfoWindow，初始时需要隐藏 -->
     <!-- 隐藏不要使用v-if，因为我们需要渲染完成后的原生html结构作为信息框的dom对象使用 -->
-    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle"></InfoWindow>
+    <InfoWindow v-show="showInfoWindow" ref="infoWindow" :info-window="infoWindow" :title="infoWindowTitle" :rect="rect"></InfoWindow>
   </div>
 </template>
 
@@ -105,6 +105,7 @@ import _ from 'lodash';
 import $ from 'jquery';
 //引入定义的信息窗组件
 import InfoWindow from '@/components/InfoWindow'
+import { useRect } from '@vant/use';
 
 const GPS = {
   PI: 3.14159265358979324,
@@ -215,7 +216,8 @@ export default {
       showInfoWindow: false,
       infoWindow: {},
       infoWindowTitle: '',
-      navBarList: []
+      navBarList: [],
+      rect: {}
     }
   },
   mounted() {
@@ -252,6 +254,13 @@ export default {
           $('.vjs-tech')[0].currentTime = 0;
         })
       }
+    },
+    showInfoWindow (val) {
+      if (val) {
+        // 元素的大小及其相对于视口的位置
+        const rect = useRect(this.$refs.root);
+        this.rect = rect;
+      }
     }
   },
   methods: {