百度地图自定义控件

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

接下来就是源码

/**
* 自定义的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);