这个全屏 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属性。写个标识符来表示当前按钮的状态