百度地圖API--控制項

百度地圖API--控制項

這裡介紹一下百度題圖的空間，控制項主要負責地圖互動。百度地圖API中提供了豐富的控制項，您還可以通過Control類來實現自訂控制項。

地圖API中提供的控制項有：

Ø Control：控制項的抽象基類，所有控制項均繼承此類的方法、屬性。通過此類您可實現自訂控制項。Ø NavigationControl：地圖平移縮放控制項，PC端預設位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控制項，預設位於地圖右下方。Ø OverviewMapControl：縮減地圖控制項，預設位於地圖右下方，是一個可摺疊的縮減地圖。Ø ScaleControl：比例尺控制項，預設位於地圖左下方，顯示地圖的比例關係。Ø MapTypeControl：地圖類型控制項，預設位於地圖右上方。Ø CopyrightControl：著作權控制項，預設位於地圖左下方。Ø GeolocationControl：定位控制項，針對移動端開發，預設位於地圖左下方。

可以使用Map.addControl()方法向地圖添加控制項。在此之前地圖需要進行初始化。例如，要將標準地圖控制項添加到地圖中，可在代碼中添加如下內容：

var map = new BMap.Map("container"); //var point = new BMap.Point(116.404, 39.915); // 建立一個點map.centerAndZoom(point, 15);map.addControl(new BMap.NavigationControl());// 地圖平移縮放控制項

可以向地圖添加多個控制項。在本例中我們向地圖添加一個平移縮放控制項、一個比例尺控制項和一個縮圖控制項。在地圖中添加控制項後，它們即刻生效。

      var map = new BMap.Map("container"); //       var point = new BMap.Point(116.404, 39.915); // 建立一個點       map.centerAndZoom(point, 15);       map.addControl(new BMap.NavigationControl());// 地圖平移縮放控制項       map.addControl(new BMap.ScaleControl()); // 比例尺控制項       map.addControl(new BMap.OverviewMapControl()); // 縮減地圖控制項       map.addControl(new BMap.MapTypeControl()); // 地圖類型控制項       var cr = new BMap.CopyrightControl({                     anchor :BMAP_ANCHOR_TOP_LEFT,                     offset : createSize(650, 5)              //設定著作權控制項位置              });       var bs = map.getBounds(); //返回地圖可視地區       cr.addCopyright({              id : 1,              content : "<a href='#'style='font-size:20px;background:yellow'>自訂著作權控制項</a>",              bounds : bs       }); //Copyright(id,content,bounds)類作為CopyrightControl.addCopyright()方法的參數       map.addControl(cr); //添加著作權控制項      map.setCurrentCity("北京"); // 僅當設定城市資訊時，MapTypeControl的切換到三維視圖功能才能可用

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

anchor表示控制項的固定位置，即控制項停靠在地圖的哪個角。當地圖尺寸發生變化時，控制項會根據固定位置的不同來調整自己的位置。anchor允許的值為：

Ø BMAP_ANCHOR_TOP_LEFT表示控制項定位於地圖的左上方。Ø BMAP_ANCHOR_TOP_RIGHT表示控制項定位於地圖的右上方。Ø BMAP_ANCHOR_BOTTOM_LEFT表示控制項定位於地圖的左下角。Ø BMAP_ANCHOR_BOTTOM_RIGHT表示控制項定位於地圖的右下角。

除了指定固定位置外，還可以通過位移量來指示控制項距離地圖邊界有多少像素。如果兩個控制項的固定位置相同，那麼控制項可能會重疊在一起，這時就可以通過位移值使二者分開顯示。

本樣本將比例尺放置在地圖的左下角，由於API預設會有著作權資訊，因此需要添加一些位移值以防止控制項重疊。

     var offset = {                     offset : new BMap.Size(150, 5)              }; // 位移              map.addControl(newBMap.NavigationControl(offset)); // 添加一個平移縮放空間，位置是位移後的位置

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

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

從左向右依次展示了上述不同類型的控制面板：

前4個為PC端平移縮放控制項樣式，最後一個為移動端縮放控制項樣式。

下面的樣本將調整平移縮放地圖控制項的外觀。

            var offset1 = {                     offset : new BMap.Size(250, 5),                     type :BMAP_NAVIGATION_CONTROL_LARGE              }; // 位移              map.addControl(new BMap.NavigationControl(offset1));               var offset2 = {                     offset : new BMap.Size(350, 5),                     type :BMAP_NAVIGATION_CONTROL_SMALL              };              map.addControl(new BMap.NavigationControl(offset2));              var offset3 = {                     offset : new BMap.Size(450, 5),                     type : BMAP_NAVIGATION_CONTROL_PAN              };              map.addControl(new BMap.NavigationControl(offset3));              var offset4 = {                     offset : new BMap.Size(550, 5),                     type :BMAP_NAVIGATION_CONTROL_ZOOM              }; // 位移              map.addControl(new BMap.NavigationControl(offset4));

百度地圖API允許您通過繼承Control來建立自訂地圖控制項。要建立可用的自訂控制項，需要做以下工作：

1.定義一個自訂控制項的建構函式。

2.設定自訂控制項建構函式的prototype屬性為Control的執行個體，以便繼承控制項基類。

3.實現initialize()方法並提供defaultAnchor和defaultOffset屬性。

首先需要定義自訂控制項的建構函式，並在建構函式中提供defaultAnchor和defaultOffset兩個屬性，以便API正確定位控制項位置，接著讓其繼承於Control。在下面的樣本中我們定義一個名為ZoomControl的控制項，每一次點擊將地圖放大兩個層級。它具有文本標識，而不是平移縮放控制項中使用的圖形表徵圖。

      //定義一個控制項類，即function        function ZoomControl() {              // 設定預設固定位置              this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;              // 設定位移量              this.defaultOffset = new BMap.Size(10, 10);       }       // 通過JavaScript的prototype屬性繼承於BMap.Control       ZoomControl.prototype= new BMap.Control();

當調用map.addControl()方法添加自訂控制項時，API會調用該對象的initialize()方法用來初始化控制項，您需要實現此方法並在其中建立控制項所需的DOM元素，並添加DOM事件。所有自訂控制項中的DOM元素最終都應該添加到地圖容器（即地圖所在的DOM元素）中去，地圖容器可以通過map.getContainer()方法獲得。最後initialize()方法需要返回控制項容器的DOM元素。

// 自訂控制項必須實現initialize方法，並且將控制項的DOM元素返回       // 在本方法中建立個div元素作為控制項的容器，並將其添加到地圖容器中       ZoomControl.prototype.initialize = function(map) {              // 建立一個DOM元素              var div = document.createElement("div");              // 添加文字說明               div.appendChild(document.createTextNode("放大2級"));              // 設定樣式               div.style.cursor = "pointer";              div.style.border = "1px solid gray";              div.style.backgroundColor = "red";              // 綁定事件，點擊一次放大兩級               div.onclick = function(e) {                     map.zoomTo(map.getZoom() +2);// 放大兩倍              }              // 添加DOM元素到地圖中              map.getContainer().appendChild(div);              // 將DOM元素返回              return div;       }

添加自訂控制項與添加其他控制項方法一致，調用map.addControl()方法即可。

       function load() {              // BMap是百度地圖API的命名空間，所有的類都在這裡面              var map = new BMap.Map("container"); //              var point = new BMap.Point(116.404, 39.915); // 建立一個點              map.centerAndZoom(point, 15);              // 建立控制項執行個體               var myZoomCtrl = new ZoomControl();              // 添加到地圖當中               map.addControl(myZoomCtrl);       }

訪問成功後我們看到左上方有一個紅色的地區，點擊後地圖會放大兩倍。

文檔代碼自己親測，學習參考百度開發人員文檔，代碼有改變，歡迎留言指正~