feat: 企业地图添加悬浮弹窗与点击事件

vue/src/utils/position.ts

@@ -40,10 +40,10 @@ export function setBoundary(map: any, T: any, geoJson: any) {
           points.push(point);
         })
         const polygon = new T.Polygon(points, {
-          color: "blue",
+          color: "#FF4040",
           weight: 2,
-          opacity: 0.8,
-          fillColor: "DodgerBlue",
+          opacity: 1,
+          fillColor: "#D8BFD8",
           fillOpacity: 0.5
         });
         // 添加多边形到地图

vue/src/views/dataMap/companyDataMap.vue

@@ -438,7 +438,7 @@ function findFuncThen(result: any) {
   companyTotal.value = result.total;
   // 重置选中
   nowCheckCompany.value.companyID = "";
-  setCompanyMarker();
+  setCompanyMarker(true);
 }
 
 // 地图初始化
@@ -452,21 +452,7 @@ const initMap = () => {
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
-      let zoomLevel = (map as any).getZoom();
-      const sizeData = computeMarkerSize(zoomLevel);
-      markerList.value.forEach((item: any) => {
-        (map as any).removeOverLay(item);
-        item.getIcon().setIconSize(new T.Point(sizeData.iconSize, sizeData.iconSize));
-        item.getIcon().setIconAnchor(sizeData.iconAnchor);
-        (map as any).addOverLay(item);
-      })
-      // 更新 label 的偏移量
-      labelList.value.forEach((item: any) => {
-        (map as any).removeOverLay(item);
-        item.setOffset(sizeData.labelOffset);
-        item.setFontSize(sizeData.fontSize);
-        (map as any).addOverLay(item);
-      })
+      setCompanyMarker(false)
     });
   }
 
@@ -509,11 +495,13 @@ function setLoginLocation() {
 }
 
 // 设置企业地图标点
-function setCompanyMarker() {
+function setCompanyMarker(setCenter: boolean) {
   delMapInfo();
 
-  // 设置中心点
-  (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), zoom);
+  if (setCenter) {
+    // 设置中心点
+    (map as any).centerAndZoom(new T.LngLat(companySearchParam.longitude, companySearchParam.latitude), zoom);
+  }
 
   if (companyList.value.length > 0) {
     let zoomLevel = (map as any).getZoom();
@@ -562,6 +550,32 @@ function setCompanyMarker() {
         marker.addEventListener('click', () => {
           checkCompanyChange(item);
         });
+        let winHtml = "";
+        if (searchType.value == 'company') {
+          winHtml = `
+            <div >
+                <p style="line-height: 12px; font-size: 14px; font-weight: 600">${item.companyName}</p>
+                <span style="line-height: 12px;">地址：${item.companyAddress}</span>
+                <br>
+                <span style="line-height: 12px;">岗位：${item.postList.length}个</span>
+            </div>
+          `;
+        }
+        if (searchType.value == 'post') {
+          winHtml = `
+            <div >
+                <p style="line-height: 12px; font-size: 14px; font-weight: 600">${item.companyName}</p>
+            </div>
+          `;
+        }
+        let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
+        // 添加鼠标经过事件
+        marker.addEventListener('mouseover', () => {
+          marker.openInfoWindow(markerInfoWin);
+        });
+        marker.addEventListener('mouseout', () => {
+          marker.closeInfoWindow();
+        });
         marker.setZIndexOffset(200);
         (map as any).addOverLay(marker);// 将标注添加到地图中
         markerList.value.push(marker);

vue/src/views/dataMap/jobUserDataMap.vue

@@ -209,6 +209,8 @@ const initMap = () => {
   if (map != null) {
     // 设置地图显示中心点为惠州市人民政府
     (map as any).centerAndZoom(centerLngLat, zoom);
+    (map as any).setMinZoom(7);
+    (map as any).setMaxZoom(14);
 
     // 地图缩放监听事件
     (map as any).addEventListener("zoomend", function () {
@@ -369,10 +371,10 @@ function computeMarkerSize(zoomLevel: any) {
   let iconAnchor = new T.Point(10 * (newIconSize / 45), 20 * (newIconSize / 45));
   // 计算新的偏移量，保持 label 居中且不超过初始值
   let offsetX = -20 + ((newIconSize - 45) / 3);
-  let offsetY = 28 + ((newIconSize - 45) / 3);
+  let offsetY = 30 + ((newIconSize - 45) / 3);
   // 确保偏移量不超过初始值
   offsetX = Math.max(offsetX, -20);
-  offsetY = Math.min(offsetY, 28);
+  offsetY = Math.min(offsetY, 30);
   // 更新 label 的偏移量
   let newOffset = new T.Point(offsetX, offsetY);
   let fontSize = Math.min(12, Math.max(8, 12 - (45 - newIconSize) / 3))