百度地图添加一个自定义标注/覆盖物/图标/控件 并且还要有文本

这里是添加自定义控件

1.定义一个控件类，即function

        function ZoomControl() {
    
    
      	// 设置默认停靠位置和偏移量  
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; 
        this.defaultOffset = new BMap.Size(10, 10);
      }
 

2.通过JavaScript的prototype属性继承于BMap.Control

ZoomControl.prototype = new BMap.Control();

3.封装初始化函数

自定义控件必须实现initialize方法，并且将控件的DOM元素返回 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中

ZoomControl.prototype.initialize = function (map) {
    
    
        // 创建一个DOM元素   
        var div = document.createElement("div");
        div.classList.add('mapbiaozhi')
        div.innerHTML = '<div class="icons"></div><div class="text">文字内容</div>'
        // 添加DOM元素到地图中   
        map.getContainer().appendChild(div);
        // 将DOM元素返回  
        return div;
      }
      // 创建控件实例    
      var myZoomCtrl = new ZoomControl();
      // 添加到地图当中    
      map.addControl(myZoomCtrl);

主要是添加一个带有类名的空容器控件，后期通过css实现背景图标跟一些其他类容就行

.Bmap-component ::v-deep .mapbiaozhi {
    
    
  display: flex;
  width: 100px;
  height: 50px;

  .icons {
    
    
    flex: 1;
    height: 100%;
    background: url('~@/assets/echarts/bz.png') no-repeat center;
    background-size: 100%;
  }

  .text {
    
    
    line-height: 50px;
    flex: 1;
  }
}