API：百度地图 官网：[http://lbsyun.baidu.com/](http://lbsyun.baidu.com/) <br> 当地图需要添加更多功能时，自带的控件往往不够，自定义控件基本是使用地图API必须要掌握的了。方法基本和自定义标注一样，就是继承的类不一样，也不需要利用draw方法绘制，从这点来说反而简单了些。下面参考官网用一个例子来展示。 <br> **一、写构造函数** ``` function BigZoomControl() { // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new BMap.Size(10, 10); } ``` 可以根据需要设置参数。 <br> **二、继承** ``` BigZoomControl.prototype = new BMap.Control(); ``` <br> **三、初始化** ``` 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，然而事件始终不触发，没找到原因。但是问题不大，因为除了设置样式麻烦了点，后面并没有多少需要操作标签的地方了。 <br> **四、调用并添加** ``` let myZoomCtrl = new BigZoomControl(); // 创建控件 map.addControl(myZoomCtrl); // 添加到地图当中 ``` 最后看看效果图：