feat(地图标记): 重构地图标记样式逻辑，支持图标和文字组合显示

重构地图标记的创建和样式管理逻辑，新增createMarkerContent方法统一处理标记内容生成。支持根据文字方向和选中状态动态调整样式，并优化标记点击时的样式切换逻辑。同时将Text标记改为Marker以支持自定义HTML内容。

feat(地图标记): 重构地图标记样式逻辑，支持图标和文字组合显示
重构地图标记的创建和样式管理逻辑，新增createMarkerContent方法统一处理标记内容生成。支持根据文字方向和选中状态动态调整样式，并优化标记点击时的样式切换逻辑。同时将Text标记改为Marker以支持自定义HTML内容。
hookehuyr
Commit 17acc9b038bbe4c1da63e35d66a5378e45f2d564 17acc9b0 1 parent 0e5b9b1b
Showing 2 changed files with 70 additions and 21 deletions
.env
src/views/checkin/map.vue
--- a/.env
View file @17acc9b
+++ b/.env
View file @17acc9b
@@ -2,9 +2,9 @@
 VITE_PORT = 8006
 # 反向代理服务器地址
-# VITE_PROXY_TARGET = https://oa-dev.onwall.cn
+VITE_PROXY_TARGET = https://oa-dev.onwall.cn
 # VITE_PROXY_TARGET = https://bm.jiqun.com
-VITE_PROXY_TARGET = https://oa.onwall.cn
+# VITE_PROXY_TARGET = https://oa.onwall.cn
 # API请求前缀
 VITE_PROXY_PREFIX = /srv/
--- a/src/views/checkin/map.vue
View file @17acc9b
+++ b/src/views/checkin/map.vue
View file @17acc9b
@@ -414,6 +414,42 @@ export default {
   methods: {
     ...mapActions(mainStore, ['changeAudio', 'changeAudioSrc', 'changeAudioStatus']),
+    /**
+     * 创建标记点的HTML内容，包含图标和文字
+     * @param {Object} entityInfo - 实体信息
+     * @param {String} textDirection - 文字方向 ('vertical' 或 'horizontal')
+     * @param {Boolean} isSelected - 是否选中状态
+     * @returns {String} HTML字符串
+     */
+    createMarkerContent(entityInfo, textDirection, isSelected) {
+      const iconUrl = entityInfo.icon || '';
+      const name = entityInfo.name || '';
+      
+      // 根据选中状态和文字方向选择样式
+      let textStyle, containerStyle;
+      if (textDirection === 'vertical') {
+        textStyle = isSelected ? this.markerStyle2 : this.markerStyle1;
+        containerStyle = 'flex-direction: column; align-items: center;';
+      } else {
+        textStyle = isSelected ? this.markerStyle2_horizontal : this.markerStyle1_horizontal;
+        containerStyle = 'flex-direction: row; align-items: center;';
+      }
+      
+      // 将样式对象转换为CSS字符串
+      const textStyleStr = Object.entries(textStyle)
+        .map(([key, value]) => `${key}: ${value}`)
+        .join('; ');
+      
+      // 创建HTML内容
+      const html = `
+        <div style="display: flex; ${containerStyle} cursor: pointer;">
+          ${iconUrl ? `<img src="${iconUrl}" style="width: 20px; height: 20px; margin: ${textDirection === 'vertical' ? '0 0 4px 0' : '0 4px 0 0'};" />` : ''}
+          <div style="${textStyleStr}">${name}</div>
+        </div>
+      `;
+      
+      return html;
+    },
     initMap() {
       // 初始化地图
       this.map = new AMap.Map('container', {
@@ -462,15 +498,15 @@ export default {
           marker_icon = entity_info[i].icon;
         }
         let text_direction = entity_info[i]?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
-        let textMarker = new AMap.Text({
+        
+        // 创建自定义HTML内容，包含图标和文字
+        const markerContent = this.createMarkerContent(entity_info[i], text_direction, false);
+        
+        let textMarker = new AMap.Marker({
           zooms: this.data_zooms, // 点标记显示的层级范围，使用地图配置的缩放范围
-          text: entity_info[i].name, //标记显示的文本内容
+          content: markerContent, // 自定义HTML内容
-          anchor: "center", //设置文本标记锚点位置
+          anchor: "center", // 设置标记锚点位置
-          // draggable: true, //是否可拖拽
+          position: entity_info[i].position, // 点标记在地图上显示的位置
-          // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
-          // angle: 10, //点标记的旋转角度
-          style: text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal,
-          position: entity_info[i].position, //点标记在地图上显示的位置
         });
         textMarker.setMap(this.map); //将文本标记设置到地图上
         this.markerSum.push(textMarker);
@@ -479,15 +515,21 @@ export default {
         }
         // 绑定景点的点击事件 - 文字出现才能触发
         var clickListener1 = textMarker.on('click', async (e) => {
-          // 还原样式
+          // 还原样式 - 将其他标记设为未选中状态
-          this.markerSum.forEach(item => {
+          this.markerSum.forEach((item, index) => {
-            if (e.target.hS !== item.hS) {
+            if (item !== textMarker) {
-              // 修改文本的样式
+              const itemInfo = entity_info[index] || entity_info.find(info => info.position[0] === item.getPosition().lng && info.position[1] === item.getPosition().lat);
-              item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle2 : this.markerStyle2_horizontal);
+              if (itemInfo) {
+                const itemDirection = itemInfo?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
+                const newContent = this.createMarkerContent(itemInfo, itemDirection, false);
+                item.setContent(newContent);
+              }
             }
-          })
+          });
-          // 修改文本的样式
+          
-          e.target.setStyle(text_direction === 'vertical' ? this.markerStyle1 : this.markerStyle1_horizontal);
+          // 设置当前标记为选中状态
+          const newContent = this.createMarkerContent(entity_info[i], text_direction, true);
+          textMarker.setContent(newContent);
           // 修改文本内容
           // textMarker.setText('样式已修改');
@@ -941,9 +983,16 @@ export default {
       this.$refs.pageInfo.outerStopAudio();
     },
     resetMarkStyle () {
-      this.markerSum.forEach(item => {
+      // 重置所有标记为未选中状态
-        item.setStyle(item._x['writing-mode'] === 'vertical-rl' ? this.markerStyle1 : this.markerStyle1_horizontal);
+      this.markerSum.forEach((item, index) => {
-      })
+        // 获取对应的实体信息
+        const entityInfo = this.navList[index];
+        if (entityInfo) {
+          const textDirection = entityInfo?.writing_mode === 'vertical' ? 'vertical' : 'horizontal';
+          const newContent = this.createMarkerContent(entityInfo, textDirection, false);
+          item.setContent(newContent);
+        }
+      });
     },
     onCloseFloat () {
       this.info_height = 0;