vue 高德地图 label API

Vue 高德地图中的 Label API 可以用来在地图上添加标注，标注上可以显示文本信息。下面是一个简单的示例：

1. 首先在 Vue 组件中引入高德地图的 JS API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

2. 在 Vue 组件的 mounted 钩子函数中初始化地图和 Label：

mounted() {
  // 初始化地图
  const map = new AMap.Map('map-container', {
    zoom: 14,
    center: [116.39, 39.9]
  })

  // 添加 Label
  const label = new AMap.Marker({
    position: [116.39, 39.9],
    map: map,
    label: {
      content: '这里是标注的文本内容',
      offset: new AMap.Pixel(20, 20)
    }
  })
}

在上面的代码中，我们首先初始化了一个地图实例，并设置了地图的缩放级别和中心点坐标。然后，在地图上添加了一个 Label，设置了标注的位置、地图实例、文本内容和偏移量。

需要注意的是，Label API 还有很多其他的配置项可以使用，比如字体颜色、字体大小等，更多的信息可以参考高德地图的官方文档。

相关问题

vue 高德地图 label 内容居中

要让 Vue 中的高德地图 label 内容居中，可以尝试以下方法：

1. 使用 CSS 样式来设置 label 的样式：

.amap-marker-label {
  text-align: center;
  line-height: 20px; /* 根据实际情况设置 */
}

2. 在创建 label 的时候，设置偏移量及其负值：

const label = new AMap.Marker({
  position: [lng, lat],
  offset: new AMap.Pixel(-20, -20), // 设置偏移量
  content: '<div style="text-align: center;">Label 内容</div>' // 设置 label 内容
});

其中，偏移量的值需要根据实际情况进行调整，确保 label 内容在 marker 上居中显示。

vue 高德地图 label 文字居中

可以通过设置文本样式将 Label 文字居中。具体实现方法如下：

<!-- 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 */
.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 的外观。