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