在百度地图中添加自定义全屏控件-Toy模板网

这篇具有很好参考价值的文章主要介绍了在百度地图中添加自定义全屏控件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

百度地图中添加全屏控件

前置知识：
进入整个页面的全屏模式：document.documentElement.requestFullscreen()
进入特定元素的全屏模式： document.getElementById("ID").requestFullscreen()
退出全屏：document.exitFullscreen()

调用百度地图API写自定义控件的核心部分代码：

 var map = new BMapGL.Map('map');    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(lng, lat), 3);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
	map.addControl(scaleCtrl);
	var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
	map.addControl(zoomCtrl);
	
// 添加自定义全屏控件  定义 一个控件类
  function ZoomControl() {
    this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
    this.defaultOffset = new BMapGL.Size(10, 20)
  }
  //通过JavaScript的prototype属性继承于BMap.Control
  ZoomControl.prototype = new BMapGL.Control();

  //自定义控件必须实现自己的initialize方法，并且将控件的DOM元素返回
  ZoomControl.prototype.initialize = function (map) {
    //创建一个dom元素
    var div = document.createElement('div');
    //添加文字说明
    div.appendChild(document.createTextNode('全屏'));
    // 设置样式
    div.style.cursor = "pointer";
    div.style.padding = "8px 13px";
    div.style.margin = "20px 0px";
    div.style.boxShadow = "0 2px 6px 0 rgba(27, 142, 236, 0.5)";
    div.style.borderRadius = "5px";
    div.style.backgroundColor = "white";
    // 绑定事件-全屏
    div.onclick = function (e) {
      if (document.fullscreenElement === null){
        document.getElementById("map").requestFullscreen();
      }else {
        document.exitFullscreen();
      }
    }

    document.addEventListener("fullscreenchange", () => {
      if (document.fullscreenElement === null) {
        console.log("Exited fullscreen");
        div.innerText = '全屏';
      } else {
        div.innerText='退出全屏';
        console.log("Entered fullscreen");
      }
    });
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    // 将DOM元素返回
    return div;
  }
  //创建控件元素
  var myZoomCtrl = new ZoomControl();
  //添加到地图中
  map.addControl(myZoomCtrl);