百度地图实现地图全屏(放大页面全屏)

这个全屏 API里面没有。是因为全屏只是个产品逻辑,把地图外的其他div隐藏,然后把地图的width设置为页面最大像素就可以了。
是js和css的技术,和API无关

在这里插入图片描述
1、先引入相关的百度地图资源

2、css
全屏按钮的图片

.btn{
	z-index:999999;margin-left:-5px;color:transparent;
	background: url(../qp.png) no-repeat;
}

3、html:

定义一个地图容器和一个全屏按钮

	<div id="btn" class="">全屏</div>
	<div class="" style="width: 100%; height: 98%; float: left;" id="allmap"></div>

在这里插入图片描述
4、js全屏逻辑实现

	//百度地图API功能,初始化地图
	var map = new BMap.Map("allmap", { enableMapClick: false });    // 创建Map实例   
	map.setMapStyle({
		style : 'midnight'
	});
	map.centerAndZoom(new BMap.Point(112.98054,28.132748), 13); // 初始化地图,设置中心点坐标和地图级别
	map.setCurrentCity("郑州"); // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	  // 添加地图放大缩小控件
	  var navigationControl = new BMap.NavigationControl({
	    // 靠左上角位置
	    anchor: BMAP_ANCHOR_TOP_LEFT,
	    // LARGE类型
	    type: BMAP_NAVIGATION_CONTROL_ZOOM,
	    // 启用显示定位
	    //enableGeolocation: true
	  });
	  map.addControl(navigationControl);
//----------------自定义 全屏控件----------------
        //定义全屏控件类
      function ZoomControl2() {
          this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
          //相当于  right:12px;top:82px;  相对于地图容器的间距   不是body
          this.defaultOffset = new BMapGL.Size(12, 82)
      }
      //通过JavaScript的prototype属性继承于BMap.Control
      ZoomControl2.prototype = new BMap.Control();

      //自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
      //在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
      ZoomControl2.prototype.initialize = function(map) {
    	  var div2 = document.getElementById("btn");
          // 绑定事件,点击地图全屏
          div2.onclick = function(e){
        	  if(document.getElementById("box-center").style.width=="44%"){
      	    	  document.getElementById("box-left").style.display="none";
      	          document.getElementById("box-right").style.display="none";
      	          document.getElementById("box-center").style.width="100%";
      	          document.getElementById("center-top").style.display="none";
      	          document.getElementById("center-center").style.display="none";
      	          var showMap = document.getElementById("allmap"); 
      	    	showMap.style.width = document.documentElement.clientWidth + "px"; 
      	    	showMap.style.height = document.documentElement.clientHeight + "px";
                }else{
      	    	  document.getElementById("box-left").style.display="";
      	          document.getElementById("box-right").style.display="";
      	          document.getElementById("box-center").style.width="44%";
      	          document.getElementById("center-top").style.display="";
      	          document.getElementById("center-center").style.display="";
      	          var showMap = document.getElementById("allmap"); 
      	         showMap.style.width = "100%"; 
       	    	showMap.style.height = "75%";
                }
          }
          // 添加DOM元素到地图中
          map.getContainer().appendChild(div2);
          // 将DOM元素返回
          return div2;
      }
      //创建控件元素
      var myZoomCtrl2 = new ZoomControl2();
      //添加到地图中
      map.addControl(myZoomCtrl2);



//----------------自定义 回到地图中心点控件----------------
	  //定义回到地图中心控件类
      function ZoomControl() {
          this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
          this.defaultOffset = new BMapGL.Size(12, 52)
      }
      //通过JavaScript的prototype属性继承于BMap.Control
      ZoomControl.prototype = new BMap.Control();

      //自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
      //在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
      ZoomControl.prototype.initialize = function(map) {
           //创建一个dom元素
          var div = document.createElement('div');
           //添加文字说明
          div.appendChild(document.createTextNode('●'));
            // 设置样式
          div.style.cursor = "pointer";
          div.style.padding = "1px 3px";
          div.style.boxShadow = "0 2px 4px 0 rgba(27, 142, 236, 0.5)";
          div.style.borderRadius = "3px";
          div.style.backgroundColor = "white";
          // 绑定事件,点击回到地图中心
          div.onclick = function(e){
              //map.panTo(new BMap.Point(112.98054,28.132748));
              map.centerAndZoom(new BMap.Point(112.98054,28.132748), 13);
          }
          // 添加DOM元素到地图中
          map.getContainer().appendChild(div);
          // 将DOM元素返回
          return div;
      }
      //创建控件元素
      var myZoomCtrl = new ZoomControl();
      //添加到地图中
      map.addControl(myZoomCtrl);

取消全屏就是把隐藏的标签给显示出来,然后恢复之前地图的宽高。
但是如果你的全屏和取消全屏是一个按钮的话
在执行逻辑代码之前需要先判断一下你是应该全屏,还是取消全屏。
因为我这里是有可以判断的依据的,所以我没有写。偷了个懒。
也可以按钮中定义一个name属性。写个标识符来表示当前按钮的状态

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

散装程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值