map

src/views/pms/map/Map.vue

@@ -17,8 +17,6 @@
         <p><strong>位置:</strong> {{ selectedDevice.location }}</p>
         <p><strong>状态:</strong> {{ deviceStatusMap[selectedDevice.status] }}</p>
       </div>
-      <!-- 添加箭头元素 -->
-      <div class="dialog-arrow"></div>
     </div>
   </div>
 </template>
@@ -95,6 +93,9 @@ export default defineComponent({
 
           initDeviceMarkers();
           map.value.addEventListener('zoomend', initDeviceMarkers);
+
+          // 添加地图点击事件监听器
+          map.value.addEventListener('click', closeDeviceInfoIfOutside);
         } else {
           console.error('百度地图API加载失败');
         }
@@ -284,6 +285,23 @@ export default defineComponent({
       selectedDevice.value = null;
     };
 
+    const closeDeviceInfoIfOutside = (e: any) => {
+      const dialogElement = document.querySelector('.device-info-dialog');
+      if (dialogElement && selectedDevice.value) {
+        const rect = dialogElement.getBoundingClientRect();
+        const x = e.pixel.x;
+        const y = e.pixel.y;
+        if (
+          x < rect.left ||
+          x > rect.right ||
+          y < rect.top ||
+          y > rect.bottom
+        ) {
+          closeDeviceInfo();
+        }
+      }
+    };
+
     const zoomIn = () => {
       if (map.value) {
         map.value.zoomIn();