百度地圖上負責與地圖交互的UI元素稱為控件。百度地圖API中提供了豐富的控件,您還可以通過Control類來實現自定義控件。
地圖API中提供的控件有:
Control:控件的抽象基類,所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。
NavigationControl:地圖平移縮放控件,PC端默認位于地圖左上方,它包含控制地圖的平移和縮放的功能。移動端提供縮放控件,默認位于地圖右下方。
OverviewMapControl:縮略地圖控件,默認位于地圖右下方,是一個可折疊的縮略地圖。
ScaleControl:比例尺控件,默認位于地圖左下方,顯示地圖的比例關系。
MapTypeControl:地圖類型控件,默認位于地圖右上方。
CopyrightControl:版權控件,默認位于地圖左下方。
GeolocationControl:定位控件,針對移動端開發,默認位于地圖左下方。
可以使用Map.addControl()方法向地圖添加控件。在此之前地圖需要進行初始化。例如,要將標準地圖控件添加到地圖中,可在代碼中添加如下內容:
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(new BMap.Point(110.1, 35.1), 5);
map.addControl(new BMap.NavigationControl());
可以向地圖添加多個控件。在本例中我們向地圖添加一個平移縮放控件、一個比例尺控件、一個縮略圖、一個地圖類型控件。在地圖中添加控件后,它們即刻生效。
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]}));//顯示電子地圖和衛星圖
控件位置偏移
除了指定??课恢猛?,還可以通過偏移量來指示控件距離地圖邊界有多少像素。如果兩個控件的停靠位置相同,那么控件可能會重疊在一起,這時就可以通過偏移值使二者分開顯示。
本示例將比例尺放置在地圖的左下角,由于API默認會有版權信息,因此需要添加一些偏移值以防止控件重疊。
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));
整體效果: