vue-baidu-map绘制航点

业务背景在地图上绘制航点，效果如下

因之前已经选中使用vue-baidu-map，在其文档中发现可以使用 折线Polyline实现，但其效果显然太low，故而想到可以结合maker去实现，具体思路是循环polyline的点去绘制marker覆盖在polyline的拐点上

在使用marker时发现我们不可能有一百个点就给marker一百个图片，因marker中可以放置label，故而我们可以给marker一个透明的图片然后用label来实现拐点，具体代码如下

        <bm-marker
              v-for="(item,index) in editPath" :key="index+'point'"
              :dragging="true"
              :position="{ lng: item.lng, lat: item.lat }"
              :icon="{
                url: 'http://img.test.com/tou-32.png',
                size: { width: 32, height: 32 }
              }"
            >
            <bm-label :content="(index + 1).toString()"/>
          </bm-marker>

而label的样式又过于难看且相对于marker是有所偏移的，我们在页面找到该元素的class后修改样式

    .BMapLabel{
      background-color: #2879FB !important;
      border-radius: 20px;
      height: 32px;
      width: 32px;
      line-height: 26px !important;
      text-align: center;
      left: 0 !important;
      top: 0 !important;
      color: #ffffff !important;
      border: 2px solid #fff !important;
      font-size: 14px !important;
    }

实现效果如下