feat: 企业与驿站地图点击列表数据显示信息标记框

vue/src/views/dataMap/companyDataMap.vue

@@ -379,6 +379,8 @@ const postBoxCompanyLabelExpanded = ref(true)
 const postLabelBoxRef = ref<Array<any>>([]);
 // 岗位要求
 const postDescBoxRef = ref<Array<any>>([]);
+// 企业的岗位拼接HTML
+const companyPostWinHtml = ref({})
 
 // 查询企业规模
 const getCompanyModelList = async function () {
@@ -515,7 +517,6 @@ function setCompanyMarker(setCenter: boolean) {
       // 岗位查询时，会出现多个岗位相同公司，按公司的ID去重
       const processedCompanyIDs = new Set();
       const companyIDCounts = {}; // 用于统计每个companyID的数量
-      const companyPosts = {}; // 用于保存每个companyID的postName拼接结果
 
       // 过滤出唯一的公司列表，并统计每个companyID的数量与岗位名称字段拼接
       uniqueCompanyList = companyList.value.filter((item: any) => {
@@ -524,14 +525,14 @@ function setCompanyMarker(setCenter: boolean) {
           processedCompanyIDs.add(item.companyID);
           companyIDCounts[item.companyID] = 1; // 初始化计数
           item.postNumber = 1; // 初始化postNumber
-          companyPosts[item.companyID] = `
+          companyPostWinHtml.value[item.companyID] = `
             <p style="margin: 5px 0;font-weight: 600">招聘岗位：</p>
             <div style="margin: 5px 0; cursor: pointer" onclick="checkCompanyChangeFun('${item.postID}', false)">${item.professionName}</div>
           `; // 初始化postName拼接
           return true;
         } else {
           companyIDCounts[item.companyID] += 1; // 增加计数
-          companyPosts[item.companyID] += `
+          companyPostWinHtml.value[item.companyID] += `
             <div style="margin: 5px 0; cursor: pointer" onclick="checkCompanyChangeFun('${item.postID}', false)">${item.professionName}</div>
           `; // 拼接postName
           return false;
@@ -541,7 +542,7 @@ function setCompanyMarker(setCenter: boolean) {
       // 更新uniqueCompanyList中元素的postNumber
       uniqueCompanyList.forEach(item => {
         item.postNumber = companyIDCounts[item.companyID];
-        item.postHtml = companyPosts[item.companyID];
+        item.postHtml = companyPostWinHtml.value[item.companyID];
       });
     }
 
@@ -578,7 +579,11 @@ function setCompanyMarker(setCenter: boolean) {
             </div>
           `;
         }
-        let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true, maxHeight: 300, maxWidth: 400});
+        let markerInfoWin = new T.InfoWindow(winHtml, {
+          autoPan: true,
+          maxHeight: 300,
+          maxWidth: 400,
+        });
         // 添加鼠标经过事件
         marker.addEventListener('mouseover', () => {
           if (searchType.value == 'post') {
@@ -668,6 +673,31 @@ const checkCompanyChange = async (company: any, funE: any) => {
   if (company.longitude && company.latitude) {
     // 设置中心点
     (map as any).centerAndZoom(new T.LngLat(company.longitude, company.latitude), 14);
+    let winHtml = "";
+    if (searchType.value == 'company') {
+      winHtml = `
+            <div>
+                <p style="font-size: 14px; font-weight: 600">${company.companyName}</p>
+                <span style="line-height: 12px;">地址：${company.companyAddress}</span>
+                <br>
+                <span style="line-height: 12px;">岗位：${company.postList.length}个</span>
+            </div>
+          `;
+    }
+    if (searchType.value == 'post') {
+      winHtml = `
+            <div >
+                <p style="font-size: 14px; font-weight: 600">${company.companyName}</p>
+                ${companyPostWinHtml.value[nowCheckCompany.value.companyID]}
+            </div>
+          `;
+    }
+    (map as any).openInfoWindow(winHtml, new T.LngLat(company.longitude, company.latitude), {
+      autoPan: true,
+      maxHeight: 300,
+      maxWidth: 400,
+      offset: new T.Point(10, -10)
+    });
   }
   await findPostList();
 }

vue/src/views/dataMap/siteDataMap.vue

@@ -361,7 +361,7 @@ function setSiteMarker(setCenter: boolean) {
                 <span style="line-height: 12px;">站点工作人员：${item.siteUsers.length}人</span>
             </div>
           `;
-          let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
+          let markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true, offset: new T.Point(3, 7)});
           // 添加鼠标经过事件
           marker.addEventListener('mouseover', () => {
             marker.openInfoWindow(markerInfoWin);
@@ -451,6 +451,24 @@ function checkSite(site: any) {
   if (site.siteLongitude && site.siteLatitude) {
     // 设置地图中心点
     (map as any).centerAndZoom(new T.LngLat(site.siteLongitude, site.siteLatitude), 14);
+    if (searchType.value == 'site') {
+      let winHtml = `
+            <div >
+                <p style="line-height: 12px; font-size: 14px; font-weight: 600">${site.siteName}</p>
+                <span style="line-height: 12px;">驿站编号：${site.siteCode}</span>
+                <br>
+                <span style="line-height: 12px;">驿站地址：${site.detailAddress}</span>
+                <br>
+                <span style="line-height: 12px;">站点工作人员：${site.siteUsers.length}人</span>
+            </div>
+          `;
+      (map as any).openInfoWindow(winHtml, new T.LngLat(site.siteLongitude, site.siteLatitude), {
+        autoPan: true,
+        maxHeight: 300,
+        maxWidth: 400,
+        offset: new T.Point(5, -20)
+      });
+    }
   }
 }