vue 高德地图 label 文字居中
时间: 2023-10-12 16:21:57 浏览: 210
可以通过设置文本样式将 Label 文字居中。具体实现方法如下:
```html
<!-- html -->
<a-map :zoom="13" :center="[116.397428, 39.90923]">
<a-marker :position="[116.397428, 39.90923]">
<a-label :position="[0, 30]" :offset="[0, -20]" :style="{textAlign: 'center'}">
<div>Label 文字居中</div>
</a-label>
</a-marker>
</a-map>
```
```css
/* css */
.amap-marker-label div {
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
```
这样就可以将 Label 中的文字居中了。其中,通过设置 `:style="{textAlign: 'center'}"` 将文本居中,通过设置 `.amap-marker-label div` 的样式来美化 Label 的外观。
相关问题
vue 高德地图 label 内容居中
要让 Vue 高德地图的 label 内容居中,可以使用 CSS 中的 text-align 属性来实现。以下是一个示例样式:
```css
.amap-marker-label {
text-align: center;
}
```
将这段样式应用到你的 Vue 组件中的高德地图标注即可。注意,这只会使标注内的文本居中,如果标注内有其他元素,需要分别处理。
阅读全文