yyj's blog

当地图需要添加更多功能时，自带的控件往往不够，自定义控件基本是使用地图API必须要掌握的了。方法基本和自定义标注一样，就是继承的类不一样，也不需要利用draw方法绘制，从这点来说反而简单了些。下面参考官网用一个例子来展示。

一、写构造函数

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

可以根据需要设置参数。

二、继承

BigZoomControl.prototype = new BMap.Control();

三、初始化

BigZoomControl.prototype.initialize = function (map) {

    // 创建一个DOM元素作为控件父标签
    let div = document.createElement("div");
    div.className = "map_info_box";    // 添加类名
    div.style.border = "1px solid gray";
    div.style.backgroundColor = "white";
    div.style.width = "150px";
    div.style.height = "300px";

    // 标题
    let title = div.appendChild(document.createElement("h3"));
    title.innerHTML = "人员信息";
    title.style.width = "100%";
    title.style.height = "30px";
    title.style.textAlign = "center";

    
    （此处省略部分非关键的样式代码等）

    // 点击事件
    div.onclick = function () {
           
    }

    map.getContainer().appendChild(div);    // 添加DOM元素到地图中
    return div;                             // 将DOM元素返回
}

这一步让我又好好地复习了一遍js操作DOM，建议还是用document.createElement来创建标签。内容用innerHTML或者document.createTextNode()，区别就是后者只支持文本，innerHTML可以支持标签。关于点击事件，我曾想试过jquery，然而事件始终不触发，没找到原因。但是问题不大，因为除了设置样式麻烦了点，后面并没有多少需要操作标签的地方了。

四、调用并添加

let myZoomCtrl = new BigZoomControl();  // 创建控件
map.addControl(myZoomCtrl);             // 添加到地图当中

最后看看效果图：

地图自定义控件的使用