百度地圖（22）-GL 添加地圖控件

1. 百度地圖GLAPI提供了的Control，比二維的控件少的多，主要是

NavigationControl3D,ScaleControl,ZoomControl , CityListControl,LocationControl, CopyrightControl 。

 

2. 其主要用法和二維控件相似，初始化后直接添加。

/**
 * 添加定位控件
 * @type {BMapGL.LocationControl}
 */
function addLocationControl() {

  var locationControl = new BMapGL.LocationControl({
    anchor:BMAP_ANCHOR_TOP_RIGHT,
    offset: new BMapGL.Size(20,20)
  });
  map.addControl(locationControl);

  locationControl.addEventListener("locationSuccess",function (e) {
    var address = "";
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    console.log("當前定位地址:"+address);
  });

  locationControl.addEventListener("locationError",function (e) {
    console.log("定位錯誤："+ e.message);
  });
}

/**
 * 添加自定義版權控件
 */
function addCopyRightControl() {
  var cr = new BMapGL.CopyrightControl({
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    offset: new BMapGL.Size(20, 20)
  });   //設置版權控件位置
  map.addControl(cr); //添加版權控件
  var bs = map.getBounds();   //返回地圖可視區域
  cr.addCopyright({
    id: 1,
    content: "<img src='../img/baidu.jpg' width='50px' height='50px'/><a href='#' style='font-size:16px;color:#000'>@安徽舜禹水務股份有限公司</a>",
    bounds: bs
  });
}

/**
 * 城市列表
 * @type {BMapGL.CityListControl}
 */
function addCityListControl() {
  var cityControl = new BMapGL.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: new BMapGL.Size(10,5)
  });
  map.addControl(cityControl);
}


/**
 *  添加地圖控件
 **/
function addMapControls() {

  //添加地圖導航控件
  map.addControl(new BMapGL.NavigationControl3D());

  //添加地圖比例尺控件
  /**
   * 比例尺工具與版本標識工具所用同一個class，anchorBL, 所以，當采用CSS方式 display:none 去掉左下角
   * 的百度標識和版權標識時，縮放比例工具也會被隱藏。
   **/
  map.addControl(new BMapGL.ScaleControl());

  map.addControl(new BMapGL.ZoomControl());

  addCityListControl();

  addLocationControl();

}

 

4. ScaleControl 的樣式與左下角百度的logo使用的同一個css，為了隱藏logo把ScaleControl也隱藏了。

 

5.. 頁面顯示

 

 

 6. 代碼參考

https://github.com/WhatGIS/bdMap