地图

src/views/pms/map/Map.vue

@@ -64,7 +64,7 @@ export default defineComponent({
         if ((window as any).BMap) {
           map.value = new (window as any).BMap.Map(mapContainer.value);
           const point = new (window as any).BMap.Point(104.114129, 37.550339);
-          map.value.centerAndZoom(point, 5);
+          map.value.centerAndZoom(point, 6);
 
           map.value.enableScrollWheelZoom(true);
           map.value.setMapType((window as any)[mapType.value]);
@@ -92,7 +92,7 @@ export default defineComponent({
       map.value.clearOverlays();
 
       const zoomLevel = map.value.getZoom();
-      if (zoomLevel > 10) {
+      if (zoomLevel > 8) {
         // 高缩放级别下显示单个设备标记
         devices.value.forEach(device => {
           const point = new (window as any).BMap.Point(device.lng, device.lat);
@@ -101,6 +101,7 @@ export default defineComponent({
         });
       } else {
         // 低缩放级别下进行聚合
+        debugger;
         clusters.value = clusterDevices(devices.value, map.value);
         clusters.value.forEach(cluster => {
           if (cluster.count === 1) {
@@ -125,7 +126,7 @@ export default defineComponent({
       const marker = new (window as any).BMap.Marker(point, {
         icon: new (window as any).BMap.Icon('https://iot.deepoil.cc/images/ding300.svg', new (window as any).BMap.Size(28, 30),
           {
-            anchor: new (window as any).BMap.Size(10, 25),
+            anchor: new (window as any).BMap.Size(14, 25),
             // imageOffset: new (window as any).BMap.Size(0, -5)
           }
         )
@@ -206,7 +207,7 @@ export default defineComponent({
 
       // 添加点击事件
       label.addEventListener('click', () => {
-        map.value?.setZoom(10);
+        map.value?.setZoom(9);
         map.value?.panTo(point);
       });
 
@@ -245,22 +246,33 @@ export default defineComponent({
       debugger
       if (zoom <= 5) return 2;
       if (zoom <= 8) return 1;
-      if (zoom < 10) return 0.5;
+      if (zoom < 10) return 5;
       return 0.1;
     };
-
+    const deviceDetail = (device: IotDeviceVO, point: any) => {
+      alert("abc")
+    }
     const showDeviceInfoWindow = (device: IotDeviceVO, point: any) => {
       const content = `
-        <div>
+        <div style="margin-top: 5px">
           <p><strong>设备编码:</strong> ${device.deviceCode}</p>
           <p><strong>设备名称:</strong> ${device.deviceName}</p>
           <p><strong>位置:</strong> ${device.location}</p>
           <p><strong>状态:</strong> ${getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, device.deviceStatus)}</p>
         </div>
+        <div>
+            <button :@click="deviceDetail" style=" background-color: #2196f3;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  margin-top: 15px;
+  cursor: pointer;">查看</button>
+        </div>
       `;
       const infoWindow = new (window as any).BMap.InfoWindow(content, {
         width: 300,
-        height: 150
+        height: 180
       });
       map.value.openInfoWindow(infoWindow, point);
     };