百度地图JavaScript API自定义控件使用记录

某页面中使用了百度地图，需要将自有的城市列表控件嵌套进一个自定义控件中

var cityCtrl = new BMapGL.CityListControl();
// 单独使用
var map = new BMapGL.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

// 定义一个控件类，即function    
function MyControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
MyControl.prototype = new BMap.Control();

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
MyControl.prototype.initialize = function(map){    
    // 创建一个DOM元素   
    var div = document.createElement("div");    
    // 添加文字说明    
    div.appendChild(document.createTextNode("放大2级"));    
    // 设置样式    
    div.style.cursor = "pointer";    
    div.style.border = "1px solid gray";    
    div.style.backgroundColor = "white";    
	div.append(cityCtrl.initialize(map) )   
    // 添加DOM元素到地图中   
    map.getContainer().appendChild(div);    
    // 将DOM元素返回  
    return div;    
 }
// 创建控件实例    
var MyControl= new MyControl();    
// 添加到地图当中    
map.addControl(MyControl);