"放大1级"));
var divZoomOut = document.createElement("div");
divZoomOut.appendChild(document.createTextNode("缩小1级"));
container.appendChild(divZoomIn);
container.appendChild(divZoomOut);
// 设置样式
container.style.fontSize = "12px";
divZoomIn.style.cursor = "pointer";
divZoomIn.style.border = "1px solid gray";
divZoomIn.style.backgroundColor = "white";
divZoomOut.style.cursor = "pointer";
divZoomOut.style.border = "1px solid gray";
divZoomOut.style.backgroundColor = "white";
// 绑定事件
divZoomIn.onclick = function(e){
map.zoomIn();
}
divZoomOut.onclick = function(e){
map.zoomOut();
}
// 添加DOM元素到地图中
map.getContainer().appendChild(container);
// 将DOM元素返回
return container;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
在上面这个代码片段中,开发者使用了抽象层次较低的DOM API来实现元素创建、样式定义和事件绑定,同时还需要了解JavaScript的prototype继承机制以及地图API约定的继承控件BMap.Control的方法
(比如将new BMap.Control()赋值给prototype对象,initialize接口需要开发者自行实现等等)。
这样做极大地满足了开发者对灵活性的要求,但也要求开发者需要掌握更多的接口和内容(DOM编程、高级JavaScript编程、API使用方法等等),同时代码的数量和复杂程度也增大了。
再来看下面的例子,有个开发者希望创建一个地图,并且在地图上添加一些控件,使地图界面看起来和百度地图(http://map.baidu.com)的界面一样,那么以下代码可以实现这个需求: