vue-baidu-map如何在bm-polygon组件上显示文字

要在`bm-polygon`组件上显示文字，你可以通过以下步骤实现：

1.通过Vue的`v-for`指令循环渲染多个`bm-polygon`组件，每个组件对应一个多边形，同时设置一个唯一的`id`属性，如下所示：

<template>
  <div>
    <bm-polygon v-for="(polygon, index) in polygons" :key="polygon.id" :id="polygon.id" :path="polygon.path"></bm-polygon>
  </div>
</template>

2.在每个`bm-polygon`组件后面添加一个`bm-label`组件，同时绑定`forId`属性和`content`属性。`forId`属性的值应该与对应的`bm-polygon`组件的`id`属性相同，`content`属性的值则为你要显示的文字内容，如下所示：

<template>
  <div>
    <bm-polygon v-for="(polygon, index) in polygons" :key="polygon.id" :id="polygon.id" :path="polygon.path"></bm-polygon>
    <bm-label v-for="(polygon, index) in polygons" :key="polygon.id" :forId="polygon.id" :content="polygon.label"></bm-label>
  </div>
</template>

3.在Vue组件的`data`选项中定义多个多边形对象，每个对象包含一个唯一的`id`属性、一个`path`属性表示多边形的路径、一个`label`属性表示要显示的文字内容，如下所示：

export default {
  data() {
    return {
      polygons: [
        {
          id: 'poly1',
          path: [
            {lng: 116.191031, lat: 39.988585},
            {lng: 116.41248, lat: 39.908718},
            {lng: 116.382905, lat: 39.947246}
          ],
          label: '多边形1'
        },
        {
          id: 'poly2',
          path: [
            {lng: 116.191031, lat: 39.988585},
            {lng: 116.233516, lat: 39.909187},
            {lng: 116.191031, lat: 39.876516},
            {lng: 116.148546, lat: 39.909187},
            {lng: 116.191031, lat: 39.988585}
          ],
          label: '多边形2'
        }
      ]
    }
  }
}

4.在`bm-polygon`组件和`bm-label`组件中分别设置样式，以及`bm-label`组件中设置`style`属性来控制文字的样式和位置，如下所示：

<style scoped>
.bm-polygon {
  fill-opacity: 0.5;
  stroke: #333;
  stroke-width: 2;
}

.bm-label {
  font-size: 14px;
  color: #fff;
  background-color: #f00;
  padding: 5px;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

<bm-label v-for="(polygon, index) in polygons" :key="polygon.id" :forId="polygon.id" :content="polygon.label" style="text-align:center;"></bm-label>

这样，每个多边形就可以显示对应的文字了。你可以根据具体需求来调整文字的样式和位置。