hookehuyr

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

1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-02 15:32:36 4 + * @LastEditTime: 2024-09-10 17:37:37
5 * @FilePath: /map-demo/src/views/index.vue 5 * @FilePath: /map-demo/src/views/index.vue
6 * @Description: 公众地图主体页面 6 * @Description: 公众地图主体页面
7 --> 7 -->
...@@ -423,6 +423,34 @@ export default { ...@@ -423,6 +423,34 @@ export default {
423 // }) 423 // })
424 // // marker合集 424 // // marker合集
425 // this.markerSum.push(marker); 425 // this.markerSum.push(marker);
426 + // 创建一个 文字 实例 - 适配竖型文字
427 + // let writing_mode = 'vertical'; // 文字方向
428 + if (entity_info[i]?.writing_mode === 'vertical') { // 标题文字垂直
429 + var textMarker = new AMap.Text({
430 + text: entity_info[i].name, //标记显示的文本内容
431 + anchor: "center", //设置文本标记锚点位置
432 + // draggable: true, //是否可拖拽
433 + // cursor: "pointer", //指定鼠标悬停时的鼠标样式。
434 + // angle: 10, //点标记的旋转角度
435 + style: {
436 + //设置文本样式,Object 同 css 样式表
437 + // "padding": ".75rem 1.25rem",
438 + // "margin-bottom": "1rem",
439 + // "border-radius": ".25rem",
440 + "background-color": "#965f13",
441 + "width": "1rem",
442 + "border-width": 0,
443 + // "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
444 + "text-align": "center",
445 + "font-size": "0.8rem",
446 + "color": "white",
447 + "writing-mode": "vertical-rl",
448 + "text-orientation": "mixed",
449 + },
450 + position: entity_info[i].position, //点标记在地图上显示的位置
451 + });
452 + textMarker.setMap(this.map); //将文本标记设置到地图上
453 + } else { // 默认方向
426 // 创建一个 LabelMarker 实例 454 // 创建一个 LabelMarker 实例
427 var labelMarker = new AMap.LabelMarker({ 455 var labelMarker = new AMap.LabelMarker({
428 position: entity_info[i].position, 456 position: entity_info[i].position,
...@@ -474,6 +502,7 @@ export default { ...@@ -474,6 +502,7 @@ export default {
474 // 将 LabelsLayer 添加到地图上 502 // 将 LabelsLayer 添加到地图上
475 // this.map.add(labelsLayer); 503 // this.map.add(labelsLayer);
476 this.markerSum.push(labelsLayer); 504 this.markerSum.push(labelsLayer);
505 + }
477 }) 506 })
478 this.map.add(this.markerSum); 507 this.map.add(this.markerSum);
479 }, 508 },
......