弹窗可拖拽

src/components/Map/index.vue

@@ -25,6 +25,7 @@ import { PointType } from '@/api/globalMap/type';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import mmJson from '@/assets/json/mm2.json';
+import { initDrag } from '@/utils';
 interface Props {
   activeMap: string;
   pointType: PointType[];

src/directive/common/drag.ts

@@ -6,7 +6,7 @@ export default {
       return;
     }
 
-    el.style.position = 'fixed';
+    el.style.position = 'absolute';
     el.style.cursor = 'move';
 
     const dragDom = el;

src/hooks/AMap/useAMap.ts

@@ -1,6 +1,6 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { nanoid } from 'nanoid';
-import { deepClone } from '@/utils';
+import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
 
 export function useAMap(options) {
@@ -257,6 +257,7 @@ export function useAMap(options) {
     // 打开InfoWindow，并设置其内容和位置
     infoWindow.setContent(content);
     infoWindow.open(map, lnglat);
+    initDrag(infoWindow.dom);
     // 解决2.0版本无法滚动问题
     infoWindow.on('mouseover', () => map.setStatus({ zoomEnable: false }));
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));

src/types/components.d.ts

@@ -97,6 +97,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
 }

src/utils/index.ts

@@ -400,3 +400,36 @@ export const hexToRgba = (hex, alpha) => {
   // 返回 RGBA 字符串
   return `rgba(${r}, ${g}, ${b}, ${alpha || 1})`;
 };
+
+export const initDrag = (el, scaleX = 1, scaleY = 1) => {
+  if (!el) return;
+  el.style.position = 'fixed';
+  el.style.cursor = 'move';
+
+  const dragDom = el;
+
+  let disX = 0; // 鼠标按下时，鼠标与拖拽元素的左边距
+  let disY = 0; // 鼠标按下时，鼠标与拖拽元素的上边距
+
+  dragDom.onmousedown = (e) => {
+    // 鼠标按下，计算当前元素距离可视区的距离
+    disX = e.clientX / scaleX - dragDom.offsetLeft;
+    disY = e.clientY / scaleY - dragDom.offsetTop;
+
+    // 鼠标移动事件
+    document.onmousemove = function (e) {
+      // 通过事件委托，计算移动的距离
+      const l = e.clientX / scaleX - disX;
+      const t = e.clientY / scaleY - disY;
+      // 移动当前元素
+      dragDom.style.left = `${l + 'px'}`;
+      dragDom.style.top = `${t + 'px'}`;
+    };
+
+    // 鼠标松开事件
+    document.onmouseup = function () {
+      document.onmousemove = null;
+      document.onmouseup = null;
+    };
+  };
+};

src/utils/olMap/olMap.ts

@@ -33,7 +33,7 @@ import Overlay from 'ol/Overlay';
 import { Draw, Select } from 'ol/interaction';
 import { click } from 'ol/events/condition';
 import Circle from 'ol/geom/Circle';
-import { deepClone, hexToRgba } from '@/utils';
+import { deepClone, hexToRgba, initDrag } from '@/utils';
 import { createBox } from 'ol/interaction/Draw';
 import * as turf from '@turf/turf';
 import { nanoid } from 'nanoid';
@@ -620,6 +620,7 @@ export class olMap {
       });
     }
     this.infoWindow.setPosition(position);
+    initDrag(this.infoWindow.element);
     this.map.addOverlay(this.infoWindow);
   }
 

src/views/globalMap/index.vue

@@ -214,7 +214,7 @@ const findChecked = (dataList, name) => {
 };
 // 点击搜索结果，添加标注
 const selectSearchMarker = (item) => {
-  const dom = activeMap.value === 'imageMap' ? map2Ref.value : mapRef.value;
+  const dom = YMapType.includes(activeMap.value) ? map2Ref.value : mapRef.value;
   let item2 = deepClone(item);
   // 获取图标
   if (iconList[item2.dataType]) {