百度地图自定义控件

上面的搜索框就是自定义的控件

接下来就是源码

/**
 * 自定义的control
 * 需要依赖的 文件有http://fontawesome.io/assets/font-awesome/css/font-awesome.css
 */

function SearchControl(posIndex,left,top){
	var position=[BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT,BMAP_ANCHOR_BOTTOM_RIGHT];
	this.defaultAnchor=position[posIndex];
	this.defaultOffset=new BMap.Size(left,top);
}
SearchControl.prototype=new BMap.Control();
SearchControl.prototype.initialize=function(map){
	var div=document.createElement("div");
	$(div).css({
		width:"150px",
		overflow:"auto",
		border:"1px solid #aaa",
		backgroundColor:"#fff"
	});
	$(div).html("<input style='height:25px;border-width:0px' type='text'><span style='padding:5px 0px'><i class='fa fa-search bigger-120' style='color:green;cursor:pointer' title='搜索'></i></span></div>");
	map.getContainer().appendChild(div);
	return div;
}

上面的代码包括三部分

1:构造函数（里面的两个属性defaultAnchor和defaultOffset 都要定义）

2:继承BMap.Control()

3:initialize方法

在initialize 方法里面我们定义要显示的控件内容，记得最后需要使用map.getContainer().appendChild(div)

在这里面还可以定义事件响应，但我更倾向将与业务相关的事件响应作为参数传入。这样，同样的控件便可以执行不同的操作。

调用的时候

var searchCtrl=new SearchControl(0,60,10);

map.addControl(searchCtrl);