Control 类

此类是所有控件的基类，您可以通过此类来实现自定义控件。所有控件均包含 Control 类的属性、方法和事件。通过 Map.addControl() 方法可将控件添加到地图上。

构造函数

构造函数	描述
Control()	创建一个控件原型实例，通过该原型实例可创建自定义控件

属性

属性	类型	描述
defaultAnchor	ControlAnchor	控件默认的停靠位置。自定义控件时需要提供此属性，作为控件的默认停靠位置
defaultOffset	Size	控件默认的位置偏移值。自定义控件时需要提供此属性，作为控件的默认偏移位置

方法

方法	返回值	描述
initialize(map: Map)	HTMLElement	抽象方法。调用 Map.addControl() 方法添加控件时将调用此方法，从而实现该控件的初始化。自定义控件时需要实现此方法，并将元素的 DOM 元素在该方法中返回。DOM 元素需要添加到地图的容器中，使用 map.getContainer() 方法可获得地图容器元素
setAnchor(anchor: ControlAnchor)	none	设置控件停靠的位置
getAnchor()	ControlAnchor	返回控件停靠的位置
setOffset(offset: Size)	none	设置控件停靠的偏移量
getOffset()	Size	返回控件停靠的偏移量
show()	none	显示控件
hide()	none	隐藏控件
isVisible()	Boolean	判断控件的可见性

示例

// 自定义控件
function ZoomControl() {
    // 默认停靠位置和偏移量
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMapGL.Size(10, 10);
}

// 通过 JavaScript 的原型继承机制继承 Control 类
ZoomControl.prototype = new BMapGL.Control();

// 自定义控件必须实现初始化方法
ZoomControl.prototype.initialize = function(map) {
    // 创建一个 DOM 元素
    var div = document.createElement('div');
    div.style.cursor = 'pointer';
    div.style.padding = '5px';
    div.style.backgroundColor = '#fff';
    div.innerHTML = '自定义控件';
    
    // 绑定事件
    div.onclick = function() {
        map.zoomIn();
    };
    
    // 添加 DOM 元素到地图中
    map.getContainer().appendChild(div);
    
    // 将 DOM 元素返回
    return div;
};

// 创建控件实例
var myZoomCtrl = new ZoomControl();

// 添加到地图中
map.addControl(myZoomCtrl);

常见用途

1. 创建自定义缩放控件
2. 创建自定义定位控件
3. 创建自定义图层切换控件

注意事项

1. 自定义控件必须继承 Control 类
2. 必须实现 initialize 方法并返回控件的 DOM 元素
3. 需要设置 defaultAnchor 和 defaultOffset 属性
4. 控件的 DOM 元素必须添加到地图容器中
5. 可以通过 show() 和 hide() 方法控制控件的显示和隐藏
6. 建议为自定义控件添加适当的样式，使其与地图风格协调