map

src/views/pms/map/Map.vue

@@ -17,6 +17,8 @@
         <p><strong>位置:</strong> {{ selectedDevice.location }}</p>
         <p><strong>状态:</strong> {{ deviceStatusMap[selectedDevice.status] }}</p>
       </div>
+      <!-- 添加箭头元素 -->
+      <div class="dialog-arrow"></div>
     </div>
   </div>
 </template>
@@ -156,6 +158,7 @@ export default defineComponent({
       // 添加鼠标悬停事件
       marker.addEventListener('mouseover', () => {
         hoverDevice.value = device;
+        showDeviceInfo(device, point);
       });
 
       marker.addEventListener('mouseout', () => {
@@ -171,17 +174,45 @@ export default defineComponent({
         offset: new (window as any).BMap.Size(-10, -10)
       });
 
+      // 初始样式
       label.setStyle({
-        color: '#101010',
+        color: '#fff',
         backgroundColor: '#c38f65',
-        borderRadius: '90%',
+        borderRadius: '50%',
         width: '40px',
         height: '40px',
         textAlign: 'center',
-        lineHeight: '20px',
+        lineHeight: '40px',
         cursor: 'pointer',
         fontSize: '18px',
-        fontWeight: 'bold'
+        fontWeight: 'bold',
+        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+        transition: 'all 0.3s ease',
+        border: '3px solid rgba(255, 255, 255, 0.5)' // 添加带有不透明度的边框
+      });
+
+      // 鼠标悬停样式
+      const hoverStyle = {
+        backgroundColor: '#a5734b',
+        transform: 'scale(1.1)'
+      };
+
+      // 鼠标移出样式
+      const normalStyle = {
+        backgroundColor: '#c38f65',
+        transform: 'scale(1)'
+      };
+
+      // 添加鼠标悬停事件
+      label.addEventListener('mouseover', () => {
+        Object.assign(label.getStyle(), hoverStyle);
+        label.setStyle(label.getStyle());
+      });
+
+      // 添加鼠标移出事件
+      label.addEventListener('mouseout', () => {
+        Object.assign(label.getStyle(), normalStyle);
+        label.setStyle(label.getStyle());
       });
 
       // 添加点击事件
@@ -228,11 +259,25 @@ export default defineComponent({
     };
 
     const showDeviceInfo = (device: Device, point: any) => {
-      debugger
       selectedDevice.value = device;
       const pixel = map.value.pointToOverlayPixel(point);
-      dialogLeft.value = pixel.x;
-      dialogTop.value = pixel.y;
+      const dialogWidth = 300; // 对话框宽度
+      const arrowWidth = 10; // 箭头宽度
+      const arrowHeight = 10; // 箭头高度
+
+      // 计算对话框的左偏移量，使箭头居中指向设备
+      dialogLeft.value = pixel.x - dialogWidth / 2;
+
+      // 计算对话框的上偏移量，使箭头指向设备
+      dialogTop.value = pixel.y - arrowHeight;
+
+      // 确保对话框不会超出地图边界
+      if (dialogLeft.value < 0) {
+        dialogLeft.value = 0;
+      }
+      if (dialogTop.value < 0) {
+        dialogTop.value = 0;
+      }
     };
 
     const closeDeviceInfo = () => {
@@ -343,4 +388,17 @@ export default defineComponent({
 .dialog-content p {
   margin: 5px 0;
 }
+
+/* 箭头样式 */
+.dialog-arrow {
+  position: absolute;
+  bottom: -10px; /* 调整箭头的垂直位置 */
+  left: 50%; /* 使箭头水平居中 */
+  transform: translateX(-50%); /* 使箭头水平居中 */
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid #fff; /* 箭头颜色与对话框背景色一致 */
+}
 </style>