|
在地圖API中，這些細節(jié)都被封裝成為抽象的控件，對于開發(fā)者來說只要new一個這樣的控件，同時指定一種外觀類型
（BMAP_STD_MAP_CONTROL_ZOOM_ONLY指僅包含放大和縮小按鈕），再add到地圖當中就好了。
可以看出這樣的接口使用起來簡單，接口數(shù)量少，也容易理解。
BMap.StandardMapControl的樣式是預先定義好的，最多支持開發(fā)者選擇幾種不同的展現(xiàn)形式，如果開發(fā)者希望自定義按鈕的樣式該如何做？
這時可以選用抽象層次較低的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;
}
// 創(chuàng)建控件
var myZoomCtrl = new ZoomControl();
// 添加到地圖當中
map.addControl(myZoomCtrl);
在上面這個代碼片段中，開發(fā)者使用了抽象層次較低的DOM API來實現(xiàn)元素創(chuàng)建、樣式定義和事件綁定，同時還需要了解JavaScript的
prototype繼承機制以及地圖API約定的繼承控件 BMap.Control的方法（比如將new BMap.Control()賦值給prototype對象，initialize接口需
要開發(fā)者自行實現(xiàn)等等）。
出處：百度泛用戶體驗
責任編輯：bluehearts
上一頁 認知維度與API的可用性評估 [1] 下一頁 認知維度與API的可用性評估 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 認知維度與API的可用性評估 [2]
