百度地图API详解之⾃定义地图控件
本⽂向⼤家介绍关于⾃定义地图控件的知识，你将了解到如何通过百度地图API⾃定义⾃⼰的地图控件。
控件基础
控件是地图API提供的供⽤户操作地图的界⾯元素，API内置了⼏个控件：缩放/平移控件（NavigationControl）、缩略图控件（OverviewMapControl）、⽐例尺控件（ScaleControl）、版权控件（CopyrightControl）和地图类型控件（MapTypeControl）。通过下⾯的图⽰可以到对应关系。
控件位置
任何控件都可以停靠在地图的四个⾓落，并通过偏移值（offset）控制具体位置，停靠位置（API中叫做anchor）通过以下4个常量控制：
BMAP_ANCHOR_TOP_LEFT 表⽰控件定位于地图的左上⾓。
BMAP_ANCHOR_TOP_RIGHT 表⽰控件定位于地图的右上⾓。
BMAP_ANCHOR_BOTTOM_LEFT 表⽰控件定位于地图的左下⾓。
BMAP_ANCHOR_BOTTOM_RIGHT 表⽰控件定位于地图的右下⾓。
⾃定义控件
控件本质上是HTML⽚段加上⼀些DOM事件的响应，进⽽再操作地图。所以编写⾃定义控件就是需要开发者⾃⾏编写HTML代码并添加⾃⼰的事件处理⽅法，⽅法中再调⽤地图API提供的接⼝来改变地图状态。
在百度地图API中⾃定义控件的编写需要以下⼏个步骤：
1. 定义⼀个⾃定义控件的构造函数，提供defaultAnchor和defaultOffset属性。
2. 继承API的控件基类。
百度api接口
3. 实现initialize⽅法。
下⾯我们就来完成⼀个最简单的⾃定义控件，以便让您了解构建⾃定义控件的完整过程是什么样的。
定义构造函数
我们定义⼀个function做为⾃定义控件的构造函数，并在其中提供了默认停靠位置和偏移量。注意它们
取值的类型：⼀个是ControlAnchors常量，⼀个是Size类。
// 定义⼀个控件类，即function
function ZoomControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
继承
通过函数对象的prototype实现继承（希望您已经了解了JavaScript中的继承机制）。继承后控件将会带有Control类的所有⽅法，您可以隐藏、显⽰控件，设置控件的停靠位置和偏移量。
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
实现initialize⽅法
当调⽤Map的addControl⽅法时，实际上API会调⽤控件实例的initialize⽅法，这⾥您需要创建控件的DOM元素并绑定事件，并把这个DOM对象添加到地图容器上（这个地图容器就是在初始化地图时提供的容器元素，可通过Map的getContainer⽅法获得）。注意，这个⽅法需要将DOM元素返回。
// ⾃定义控件必须实现initialize⽅法，并且将控件的DOM元素返回
// 在本⽅法中创建个div元素作为控件的容器，并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建⼀个DOM元素
var div = ateElement("div");
// 添加⽂字说明
div.ateTextNode("放⼤2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 绑定事件，点击⼀次放⼤两级
}
// 添加DOM元素到地图中
// 将DOM元素返回
return div;
}
添加控件到地图
添加⾃定义控件和添加内置控件过程⼀样：
// 创建控件实例
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
我们会在地图中看到⾃⼰的控件了：
通过firebug我们可以看到⾃定义控件的DOM元素被放⼊在地图容器之中，作为它的⼀个⼦元素：
最后我们⽤⼀个完整的流程图来描述添加⾃定义控件的过程：
在了解⾃定义控件的机制后相信开发者会根据需求开发⾃⼰的地图控件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。