控件
地圖控件概述
百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過Control類來實(shí)現(xiàn)自定義控件。
地圖API中提供的控件有：
Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實(shí)現(xiàn)自定義控件。
NavigationControl：地圖平移縮放控件，PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認(rèn)位于地圖右下方。
OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個可折疊的縮略地圖。
ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。
MapTypeControl：地圖類型控件，默認(rèn)位于地圖右上方。
CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。
GeolocationControl：定位控件，針對移動端開發(fā)，默認(rèn)位于地圖左下方。
向地圖添加控件
可以使用Map.addControl()方法向地圖添加控件。在此之前地圖需要進(jìn)行初始化。例如，要將標(biāo)準(zhǔn)地圖控件添加到地圖中，可在代碼中添加如下內(nèi)容：
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addControl(new BMap.NavigationControl());可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。在地圖中添加控件后，它們即刻生效。
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京"); // 僅當(dāng)設(shè)置城市信息時，MapTypeControl的切換功能才能可用控制控件位置
初始化控件時，可提供一個可選參數(shù)，其中的anchor和offset屬性共同控制控件在地圖上的位置。
控件?？课恢?anchor表示控件的停靠位置，即控件停靠在地圖的哪個角。當(dāng)?shù)貓D尺寸發(fā)生變化時，控件會根據(jù)?？课恢玫牟煌瑏碚{(diào)整自己的位置。anchor允許的值為：
BMAP_ANCHOR_TOP_LEFT 表示控件定位于地圖的左上角。
BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地圖的右上角。
BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地圖的左下角。
BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地圖的右下角。
控件位置偏移
除了指定?？课恢猛?，還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個控件的?？课恢孟嗤?，那么控件可能會重疊在一起，這時就可以通過偏移值使二者分開顯示。
本示例將比例尺放置在地圖的左下角，由于API默認(rèn)會有版權(quán)信息，因此需要添加一些偏移值以防止控件重疊。
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));修改控件配置
地圖API的控件提供了豐富的配置參數(shù)，您可參考API文檔來修改它們以便得到符合要求的控件外觀。例如，NavigationControl控件就提供了如下類型：
BMAP_NAVIGATION_CONTROL_LARGE 表示顯示完整的平移縮放控件。
BMAP_NAVIGATION_CONTROL_SMALL 表示顯示小型的平移縮放控件。
BMAP_NAVIGATION_CONTROL_PAN 表示只顯示控件的平移部分功能。
BMAP_NAVIGATION_CONTROL_ZOOM 表示只顯示控件的縮放部分功能。
下圖從左向右依次展示了上述不同類型的控件外觀：
上圖前4個為PC端平移縮放控件樣式，最后一個為移動端縮放控件樣式。
下面的示例將調(diào)整平移縮放地圖控件的外觀。
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));自定義控件
百度地圖API允許您通過繼承Control來創(chuàng)建自定義地圖控件。
要創(chuàng)建可用的自定義控件，您需要做以下工作：
1.定義一個自定義控件的構(gòu)造函數(shù)。 2.設(shè)置自定義控件構(gòu)造函數(shù)的prototype屬性為Control的實(shí)例，以便繼承控件基類。 3.實(shí)現(xiàn)initialize()方法并提供defaultAnchor和defaultOffset屬性。
定義構(gòu)造函數(shù)并繼承Control
首先您需要定義自定義控件的構(gòu)造函數(shù)，并在構(gòu)造函數(shù)中提供defaultAnchor和defaultOffset兩個屬性，以便API正確定位控件位置，接著讓其繼承于Control。在下面的示例中我們定義一個名為ZoomControl的控件，每一次點(diǎn)擊將地圖放大兩個級別。它具有文本標(biāo)識，而不是平移縮放控件中使用的圖形圖標(biāo)。
// 定義一個控件類，即function
function ZoomControl(){
// 設(shè)置默認(rèn)?？课恢煤推屏?nbsp;
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通過JavaScript的prototype屬性繼承于BMap.Control
ZoomControl.prototype = new BMap.Control();初始化自定義控件
當(dāng)調(diào)用map.addControl()方法添加自定義控件時，API會調(diào)用該對象的initialize()方法用來初始化控件，您需要實(shí)現(xiàn)此方法并在其中創(chuàng)建控件所需的DOM元素，并添加DOM事件。所有自定義控件中的DOM元素最終都應(yīng)該添加到地圖容器（即地圖所在的DOM元素）中去，地圖容器可以通過map.getContainer()方法獲得。最后initialize()方法需要返回控件容器的DOM元素。
// 自定義控件必須實(shí)現(xiàn)initialize方法，并且將控件的DOM元素返回
// 在本方法中創(chuàng)建個div元素作為控件的容器，并將其添加到地圖容器中
ZoomControl.prototype.initialize = function(map){
// 創(chuàng)建一個DOM元素
var div = document.createElement("div");
// 添加文字說明
div.appendChild(document.createTextNode("放大2級"));
// 設(shè)置樣式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
// 綁定事件，點(diǎn)擊一次放大兩級
div.onclick = function(e){
map.zoomTo(map.getZoom() + 2);
}
// 添加DOM元素到地圖中
map.getContainer().appendChild(div);
// 將DOM元素返回
return div;
}添加自定義控件
添加自定義控件與添加其他控件方法一致，調(diào)用map.addControl()方法即可。
// 創(chuàng)建控件實(shí)例 var myZoomCtrl = new ZoomControl();
// 添加到地圖當(dāng)中 map.addControl(myZoomCtrl);