百度地圖API-控件

初始化百度地圖的基礎方法咱們已經學會了，那麼，想讓咱們的地圖展現的更美觀，體驗度更好，天然離不開百度地圖API給咱們提供的豐富的插件。同時呢，咱們還能夠經過Control類自定義控件。那麼，百度地圖API給咱們提供的插件有哪些呢？

• Control：控件的抽象基類，全部控件均繼承此類的方法，屬性，而且經過此類能夠自定義咱們本身的控件。
• NavigationControl：地圖平移縮放控件，PC端默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認位於地圖右下方。
• OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖。
• ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關係。
• MapTypeControl：地圖類型控件，默認位於地圖右上方。
• CopyrightControl：版權控件，默認位於地圖左下方。
• GeolocationControl:定位控件，針對移動端開發，默認位於地圖左下方。

瞭解了相關的控件以後，咱們就能夠開始給咱們上節初始化的地圖添加空間啦。以下：

1 var map = new BMap.Map("container");             //建立地圖實例
2 var point = new BMap.Point(116.404,39.915);      //建立點座標
3 map.centerAndZoom(point,15);                　　　//初始化地圖
4 map.addControl(new BMap.NavigationControl());  　//向地圖添加控件

咱們剛剛給地圖添加了一個平移縮放控件，如今咱們再多添加些控件進去。以下：

1 map.addControl(new BMap.OverviewmapControl); //向地圖添加縮略控件
2 map.addCoontrol(new BMap.MapTypeControl);    //向地圖添加地圖類型控件
3 map.setCurrentCity("北京");                   //僅當設置城市信息時，MapTypeControl的切換功能纔可用

 

咱們能夠自定義這些控件的位置，若是不指定，他們會按默認的排列。

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

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

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

除了指定停靠位置外，還能夠經過偏移量來指示控件距離地圖邊界有多少像素。若是兩個控件的停靠位置相同，那麼控件可能會重疊在一塊兒，這時就能夠經過偏移值使兩者分開顯示。

因爲API默認會有版權信息，所以須要添加一些偏移值以防止控件重疊。以下：

1 /**
2 * 向地圖添加比例尺控件，並設置一些偏移值，防止控件重疊
3 */
4 var opts = {offset:BMap.Size(150,5)}
5 map.addControl(new BMap.ScaleControl(opts));

 

咱們除了能夠控制控件的位置和偏移量以外，還能夠設置控件的外觀樣式，例如NavigationControl 平移縮放控件的樣式以下（其餘還有不少控件的樣式這裏就不一一贅述）：

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

下面咱們對平移縮放控件設置一下外觀，以下：

1 /**
2 * 向地圖添加平移縮放控件，並設置樣式
3 */
4 var opts = {type:BMAP_NAVIGATION_CONTROL_LARGE}
5 map.addControl(new BMap.NavigationControl(opts));

 

除了百度地圖API給咱們提供的控件外，咱們還能夠自定義屬於咱們本身的控件，步驟以下：

1. 定義一個自定義控件的構造函數。
2. 設置自定義控件構造函數的prototype屬性爲Control的實例，以便繼承控件基類。
3. 實現initialize（）方法並提供defaultAnchor和defaultOffset屬性。

下面咱們在剛纔地圖的基礎上自定義一個控件：以下：

 1 　　　　　　　　　　/**
 2                  * 自定義控件類
 3                  */
 4                 function ZoomControl(){
 5                     //設置默認停靠位置和偏移量
 6                     this.defaultAnchor = BMap_ANCHOR_TOP_LEFT;
 7                     this.defaultOffset = new BMap.Size(10,10);
 8                 }
 9                 //經過javaScript的prototype屬性繼承於BMap.Control
10                 ZoomControl.prototype = new BMap.Control();
11                 //自定義控件必須實現initialize方法，而且將控件的DOM元素返回
12                 ZoomControl.prototype.initialize = function(map){
13                     //建立一個ＤＯＭ元素
14                     var div = document.createDocument("div");
15                     //添加文字說明
16                     div.appendChild(document.createTextNode("放大2級"));
17                     //設置樣式
18                     div.style.cursor="pointer";
19                     div.style.border="1px solide gray";
20                     div.style.backgroundColor="white";
21                     //綁定事件，點擊1次放大2級
22                     div.onclick = function(e){
23                         map.zoomTo(map.getZoom()+2);
24                     }
25                     //添加DOM元素到地圖中，
26                     map.getContainer.appendChild(div);
27                     //將DOM元素返回
28                     return div;
29                 }
30                 //建立控件實例
31                 var myZoomCtrl = new ZoomControl();
32                 map.addControl(myZoomCtrl);

 

效果以下圖：

 

 好啦，今天的內容就到這裏啦，總結一下：

主要掌握百度地圖API給咱們提供的一些控件，固然還有其餘的控件，多運用他們，才能熟能生巧，另外，自定義控件部分要記住幾個步驟，。總之，多練習纔是熟練應用的制勝法寶。