map

src/views/pms/map/Map.vue

@@ -6,12 +6,12 @@
       <button @click="zoomOut">缩小</button>
       <button @click="toggleMapType">切换地图类型({{ mapType === 'BMAP_NORMAL_MAP' ? '地图' : '卫星' }})</button>
     </div>
-    <div v-if="selectedDevice" class="device-info-popup">
-      <div class="popup-header">
+    <div v-if="selectedDevice" class="device-info-dialog" :style="{ left: dialogLeft + 'px', top: dialogTop + 'px' }">
+      <div class="dialog-header">
         <h3>设备详情</h3>
         <button @click="closeDeviceInfo">×</button>
       </div>
-      <div class="popup-content">
+      <div class="dialog-content">
         <p><strong>设备ID:</strong> {{ selectedDevice.id }}</p>
         <p><strong>设备名称:</strong> {{ selectedDevice.name }}</p>
         <p><strong>位置:</strong> {{ selectedDevice.location }}</p>
@@ -49,6 +49,8 @@ export default defineComponent({
     const selectedDevice = ref<Device | null>(null);
     const hoverDevice = ref<Device | null>(null);
     const clusters = ref<Cluster[]>([]);
+    const dialogLeft = ref<number>(0);
+    const dialogTop = ref<number>(0);
 
     // 设备数据示例
     const devices = ref<Device[]>([
@@ -148,7 +150,7 @@ export default defineComponent({
 
       // 添加点击事件
       marker.addEventListener('click', () => {
-        showDeviceInfo(device);
+        showDeviceInfo(device, point);
       });
 
       // 添加鼠标悬停事件
@@ -164,52 +166,17 @@ export default defineComponent({
     };
 
     const createClusterLabel = (cluster: Cluster, point: any) => {
-      debugger
-      // const labelStyle = {
-      //   // 基础样式
-      //   color: '#2d3436',                // 深灰色文字
-      //   fontSize: '14px',
-      //   fontWeight: 500,
-      //   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
-      //   backgroundColor: 'rgba(255, 255, 255, 0.95)', // 半透明白色背景
-      //   border: '1px solid rgba(0, 0, 0, 0.05)',      // 极细边框
-      //   borderRadius: '6px',
-      //   padding: '8px 16px',
-      //   whiteSpace: 'nowrap',
-      //   boxShadow: '0 3px 6px -1px rgba(0, 0, 0, 0.1)', // 柔和投影
-      //
-      //   // 文字样式
-      //   textShadow: '0 1px 0 rgba(255, 255, 255, 0.8)',
-      //   letterSpacing: '0.5px',
-      //
-      //   // 交互相关
-      //   cursor: 'default',
-      //   userSelect: 'none',
-      //   transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)' // 流畅动画
-      // }
-      //
-      // // 创建标签实例
-      // const label = new BMapGL.Label(cluster.count.toString(), {
-      //   position: point,
-      //   offset: new BMapGL.Size(
-      //     -parseInt(labelStyle.padding.split(' ')[1].replace('px', '')) / 2,
-      //     -parseInt(labelStyle.padding.split(' ')[0].replace('px', '')) - 12 // 垂直居中偏移
-      //   )
-      // })
-      //
-      // // 应用样式
-      // label.setStyle(labelStyle)
       const label = new (window as any).BMap.Label(cluster.count.toString(), {
         position: point,
         offset: new (window as any).BMap.Size(-10, -10)
       });
 
       label.setStyle({
-        color: '#fff',
-        backgroundColor: '#1890ff',
-        borderRadius: '50%',
-        width: '30px',
-        height: '30px',
+        color: '#101010',
+        backgroundColor: '#c38f65',
+        borderRadius: '90%',
+        width: '40px',
+        height: '40px',
         textAlign: 'center',
         lineHeight: '20px',
         cursor: 'pointer',
@@ -260,8 +227,12 @@ export default defineComponent({
       return 0.1;
     };
 
-    const showDeviceInfo = (device: Device) => {
+    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 closeDeviceInfo = () => {
@@ -308,7 +279,9 @@ export default defineComponent({
       zoomOut,
       toggleMapType,
       showDeviceInfo,
-      closeDeviceInfo
+      closeDeviceInfo,
+      dialogLeft,
+      dialogTop
     };
   }
 });
@@ -343,10 +316,8 @@ export default defineComponent({
   cursor: pointer;
 }
 
-.device-info-popup {
+.device-info-dialog {
   position: absolute;
-  top: 20px;
-  right: 20px;
   z-index: 1000;
   width: 300px;
   background: #fff;
@@ -355,21 +326,21 @@ export default defineComponent({
   padding: 15px;
 }
 
-.popup-header {
+.dialog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
 }
 
-.popup-header button {
+.dialog-header button {
   background: none;
   border: none;
   font-size: 18px;
   cursor: pointer;
 }
 
-.popup-content p {
+.dialog-content p {
   margin: 5px 0;
 }
 </style>