地圖控件概述

百度地圖上負(fù)責(zé)與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件，您還可以通過Control類來實(shí)現(xiàn)自定義控件。

地圖API中提供的控件有：

Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實(shí)現(xiàn)自定義控件。

NavigationControl：地圖平移縮放控件，PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。移動(dòng)端提供縮放控件，默認(rèn)位于地圖右下方。

OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個(gè)可折疊的縮略地圖。

ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。

MapTypeControl：地圖類型控件，默認(rèn)位于地圖右上方。

CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。

GeolocationControl：定位控件，針對移動(dòng)端開發(fā)，默認(rèn)位于地圖左下方。

向地圖添加控件

可以使用Map.addControl()方法向地圖添加控件。在此之前地圖需要進(jìn)行初始化。例如，要將標(biāo)準(zhǔn)地圖控件添加到地圖中，可在代碼中添加如下內(nèi)容：

var map = new BMap.Map("allmap");
 map.centerAndZoom(new BMap.Point(new BMap.Point(110.1, 35.1), 5);
 map.addControl(new BMap.NavigationControl());

可以向地圖添加多個(gè)控件。在本例中我們向地圖添加一個(gè)平移縮放控件、一個(gè)比例尺控件、一個(gè)縮略圖、一個(gè)地圖類型控件。在地圖中添加控件后，它們即刻生效。

map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl(ture));
map.addControl(new BMap.OverviewMapControl()); 
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));//顯示電子地圖和衛(wèi)星圖

控制控件位置

控件位置偏移

除了指定停靠位置外，還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個(gè)控件的?？课恢孟嗤敲纯丶赡軙?huì)重疊在一起，這時(shí)就可以通過偏移值使二者分開顯示。

本示例將比例尺放置在地圖的左下角，由于API默認(rèn)會(huì)有版權(quán)信息，因此需要添加一些偏移值以防止控件重疊。

var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));

整體效果：