百度地圖各種控件：地圖平移縮放控件NavigationControl、地圖類型控件MapTypeControl

注：代碼複製即可用，標色代碼爲主要代碼

 

百度地圖提供瞭如下控件：

1.Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。

2.NavigationControl：地圖平移縮放控件，PC端默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認位於地圖右下方。

3.OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖。

4.ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關係。

5.MapTypeControl：地圖類型控件，默認位於地圖右上方(地圖，衛星，三維)。

6.CopyrightControl：版權控件，默認位於地圖左下方。

7.GeolocationControl：定位控件，針對移動端開發，默認位於地圖左下方。

 

html示例

<div id="map"></div>

<script src="http://api.map.baidu.com/api?v=2.0&ak="></script

 

NavigationControl：地圖平移縮放控件

let map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 5);
map.enableScrollWheelZoom(true);
let opts = {
    anchor: BMAP_ANCHOR_TOP_RIGHT
};
map.addControl(new BMap.NavigationControl(opts));

 

MapTypeControl：地圖類型控件

let map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(104.07258, 30.550701), 5);
map.enableScrollWheelZoom(true);
let opts = {
    anchor: BMAP_ANCHOR_TOP_RIGHT
}
map.addControl(new BMap.MapTypeControl(opts))

 

 

 

 

 

 

 

 

 修改控件停靠位置

初始化控件時，可提供一個可選參數，其中的anchor和offset屬性共同控制控件在地圖上的位置

anchor表示控件的停靠位置，即控件停靠在地圖的哪一個角。當地圖尺寸發生變化時，控件會根據停靠位置的不一樣來調整本身的位置。anchor容許的值爲：

• BMAP_ANCHOR_TOP_LEFT 表示控件定位於地圖的左上角。
• BMAP_ANCHOR_TOP_RIGHT 表示控件定位於地圖的右上角。
• BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位於地圖的左下角。
• BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位於地圖的右下角

 

offset設置停靠位置

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

 

 anchor設置停靠位置

let opts = {
    anchor: BMAP_ANCHOR_TOP_RIGHT
}

 

 

修改控件配置

　　地圖API的控件提供了豐富的配置參數，您可參考API文檔來修改它們以便獲得符合要求的控件外觀。例如，NavigationControl控件就提供了以下類型：htm

• BMAP_NAVIGATION_CONTROL_LARGE 表示顯示完整的平移縮放控件。
• BMAP_NAVIGATION_CONTROL_SMALL 表示顯示小型的平移縮放控件。
• BMAP_NAVIGATION_CONTROL_PAN 表示只顯示控件的平移部分功能。
• BMAP_NAVIGATION_CONTROL_ZOOM 表示只顯示控件的縮放部分功能。

下圖從左向右依次展現了上述不一樣類型的控件外觀：