Showing
1 changed file
with
30 additions
and
1 deletions
| 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 | }, | ... | ... |
-
Please register or login to post a comment