产品设计

认知维度与API的可用性评估

"放大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)的界面一样,那么以下代码可以实现这个需求:

// 示例三

								

							
希望看到您的想法,请您发表评论x