百度地图-定位控件 自定义控件的图标

现在有个 vue 的项目， 用到了百度地图的定位组件，但是需要 自定义定位控件的图标，遇到了一些问题

现在自定义了一个百度地图定位控件， 但是定位的时候，图标会换成默认的图标。

image.png

目前尝试了以下解决方案：

var geolocationControl = new BMap.GeolocationControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,//控件的停靠位置
            offset:new BMap.Size(10,40),//偏移距离
            //showAddressBar:false,
            locationIcon:new BMap.Icon("images/icon.png", new BMap.Size(23, 24))//定位中心点的Icon样式
        })

这个改的 是 定位点的图标 而不是 定位按钮

image.png

.box {
 >>> .BMap_geolocationIcon {
      background-image: url('map_location.png') !important;
   }
 }

这样写，定位的时候不会显示定位加载图标了，不够友好

2、 查看源码，发现

Bmap.Control
类的

initialize
和

remove
方法是语义明确的，其他的 yB、yC语义都不明。 只能监听

tilesloaded
事件，可以解决，以下是基于 ES6 自定义了 百度地图定位控件类， 重写了 initialize 方法， 并监听了百度地图的

1
tilesloaded
事件

class MyGeoLocationControl extends BMap.GeolocationControl {
    constructor(opt) {
        super(opt);
        this._setting = opt;
        this._geoLocationMarker = null;
    }
    // 重写initialize方法，获取 dom 元素
    initialize (map) {
        this._map = map;
        this._dom = super.initialize(map);
        this._redraw();
        this._addEventListener();
        return this._dom;
    }
    // 定位控件背景图片换成自己的
    _redraw () {
        if (this._dom) {
            let geolocationIconDom = this._dom.getElementsByClassName('BMap_geolocationIcon')[0];
            let _backgroundImage = geolocationIconDom.style['background-image'];
            // 如果定位控件的背景图片被换成了百度的默认图标，则换回来！！！
            if (_backgroundImage.includes('map_location.png')) {
                return true;
            }
            geolocationIconDom.style['background-image'] = "url('map_location.png')";
        }
    }
    // 添加事件监听
    _addEventListener () {
        // fixed: 百度地图， 会把定位控件的图标换成自己的， 这里再换回来！
        this._map.addEventListener('tilesloaded', () => {
            this._redraw();
        })
    }
}

但是感觉两种解决方案都挺野蛮不够优雅，求教更优雅的解决方式。 或者说 有没有 类似