地图标题文字新增垂直和水平排序现实

 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-02 15:32:36
+ * @LastEditTime: 2024-09-10 17:37:37
  * @FilePath: /map-demo/src/views/index.vue
  * @Description: 公众地图主体页面
 -->
@@ -423,57 +423,86 @@ export default {
         // })
         // // marker合集
         // this.markerSum.push(marker);
-        // 创建一个 LabelMarker 实例
-        var labelMarker = new AMap.LabelMarker({
-          position: entity_info[i].position,
-          opacity: 1,
-          zIndex: 2,
-          opacity: 0.9,
-          // rank: 10,
-          icon: {
-            image: marker_icon,
-            anchor: 'bottom-center',
-            size: [36, 36],
-          },
-          text: {
-            zooms: [18, 20],
-            content: entity_info[i].name,
-            direction: 'top',
-            offset: [0, 5],
+        // 创建一个 文字 实例 - 适配竖型文字
+        // let writing_mode = 'vertical'; // 文字方向
+        if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
+          var textMarker = new AMap.Text({
+            text: entity_info[i].name, //标记显示的文本内容
+            anchor: "center", //设置文本标记锚点位置
+            // draggable: true, //是否可拖拽
+            // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
+            // angle: 10, //点标记的旋转角度
             style: {
-              padding: [10, 10],
-              fontSize: 14,
-              fillColor: '#fff',
-              strokeWidth: 0,
-              backgroundColor: '#965f13',
-              borderWidth: 0,
+              //设置文本样式，Object 同 css 样式表
+              // "padding": ".75rem 1.25rem",
+              // "margin-bottom": "1rem",
+              // "border-radius": ".25rem",
+              "background-color": "#965f13",
+              "width": "1rem",
+              "border-width": 0,
+              // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
+              "text-align": "center",
+              "font-size": "0.8rem",
+              "color": "white",
+              "writing-mode": "vertical-rl",
+              "text-orientation": "mixed",
+            },
+            position: entity_info[i].position, //点标记在地图上显示的位置
+          });
+          textMarker.setMap(this.map); //将文本标记设置到地图上
+        } else { // 默认方向
+          // 创建一个 LabelMarker 实例
+          var labelMarker = new AMap.LabelMarker({
+            position: entity_info[i].position,
+            opacity: 1,
+            zIndex: 2,
+            opacity: 0.9,
+            // rank: 10,
+            icon: {
+              image: marker_icon,
+              anchor: 'bottom-center',
+              size: [36, 36],
+            },
+            text: {
+              zooms: [18, 20],
+              content: entity_info[i].name,
+              direction: 'top',
+              offset: [0, 5],
+              style: {
+                padding: [10, 10],
+                fontSize: 14,
+                fillColor: '#fff',
+                strokeWidth: 0,
+                backgroundColor: '#965f13',
+                borderWidth: 0,
+              }
             }
+          });
+          if (clickListener) {
+            labelMarker.off('click', clickListener)
           }
-        });
-        if (clickListener) {
-          labelMarker.off('click', clickListener)
+          // 绑定景点的点击事件 - 文字出现才能触发
+          var clickListener = labelMarker.on('click', (e) => {
+            // 不同弹框类型
+            if (entity_info[i].window_type === 'normal') {
+              this.positionMarker(entity_info[i])
+            } else if (entity_info[i].window_type === 'lite') {
+              this.positionLiteMarker(entity_info[i])
+            } else if (entity_info[i].window_type === 'warn') {
+              this.positionWarnMarker(entity_info[i])
+            }
+          })
+          // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
+          // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
+          var labelsLayer = new AMap.LabelsLayer({
+            collision: true,
+          });
+          // // 将 LabelMarker 实例添加到 LabelsLayer 上
+          labelsLayer.add(labelMarker);
+          // 将 LabelsLayer 添加到地图上
+          // this.map.add(labelsLayer);
+          this.markerSum.push(labelsLayer);
         }
-        // 绑定景点的点击事件 - 文字出现才能触发
-        var clickListener = labelMarker.on('click', (e) => {
-          // 不同弹框类型
-          if (entity_info[i].window_type === 'normal') {
-            this.positionMarker(entity_info[i])
-          } else if (entity_info[i].window_type === 'lite') {
-            this.positionLiteMarker(entity_info[i])
-          } else if (entity_info[i].window_type === 'warn') {
-            this.positionWarnMarker(entity_info[i])
-          }
-        })
-        // 使用LabelsLayer包裹缩放地图时，图标不会自动显示和消失需要配置rank排序
-        // 创建一个 LabelsLayer 实例来承载 LabelMarker，[LabelsLayer 文档](https://lbs.amap.com/api/jsapi-v2/documentation#labelslayer)
-        var labelsLayer = new AMap.LabelsLayer({
-          collision: true,
-        });
-        // // 将 LabelMarker 实例添加到 LabelsLayer 上
-        labelsLayer.add(labelMarker);
-        // 将 LabelsLayer 添加到地图上
-        // this.map.add(labelsLayer);
-        this.markerSum.push(labelsLayer);
       })
       this.map.add(this.markerSum);
     },