在地图API中，这些细节都被封装成为抽象的控件，对于开发者来说只要new一个这样的控件，同时指定一种外观类型

（BMAP_STD_MAP_CONTROL_ZOOM_ONLY指仅包含放大和缩小按钮），再add到地图当中就好了。

可以看出这样的接口使用起来简单，接口数量少，也容易理解。

BMap.StandardMapControl的样式是预先定义好的，最多支持开发者选择几种不同的展现形式，如果开发者希望自定义按钮的样式该如何做？

这时可以选用抽象层次较低的API，请看下面示例：

 示例二

// 定义一个控件类
var ZoomControl = function(){
// 默认停靠位置和偏移量
 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  this.defaultOffset = [10, 10];
};
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function(map){
// 容器元素
  var container = document.createElement("div");
  var divZoomIn = document.createElement("div");
  divZoomIn.appendChild(document.createTextNode("放大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接口需

要开发者自行实现等等）。

出处：百度泛用户体验
责任编辑：bluehearts

上一页 认知维度与API的可用性评估 [1] 下一页 认知维度与API的可用性评估 [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。