html5全屏的小坑

今天做了一个html5全屏结合百度地图api的demo，想在浏览器里模仿一下原生百度地图应用的感觉。

然后遇到了两个小坑，

第一：chrome,firefox浏览器要求navigator.geolocation.getCurrentPosition()必须在安全的环境下的调用，也就是https协议。于是我将自己的网站 https://www.helloweb.top 升级为了https,由于手动安装Let’s Encrypt的协议有点麻烦，总是报错，时间有限，所以我选择了阿里云的免费协议，这个比较简单，只需要申请，然后下载并上传到你服务器的指定文件夹就行了，十几分钟足够搞定。腾讯云的也可以，但是申请稍慢一点。

第二：我的地图上有全屏的按钮，点击要实现全屏和退出全屏的切换。按钮原本是在地图div后面的同级div，点击全屏没问题，但是全屏后按钮消失了？这是为啥呢？网上找了一下，发现元素全屏之后，它的z-index会被设置为最大值，也就是2147483650，所以按钮被盖住了。对按钮进行固定定位，z-inedx也设置为这个值，可以显示了，但是全屏之后，发现按钮不能点击，还是和z-index有关。于是尝试了一下修改全屏之后的地图z-index值和按钮的z-index值，还是无效，也可能是我方法不对。于是换个思路，全屏之后，在地图的容器里append两个按钮，这样总可以吧？试了一下，这样可以了。

代码如下

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #fullscreen{
        width:78px;
        height:30px;
        border-radius:3px;
        opacity:0.9;
        background:#9c9a9a;
        color:#fff;
        position: fixed;
        bottom:3%;
        right:3%;
        z-index: 2147483650;
        text-align:center;
        line-height: 30px;
        cursor:pointer;
        font-weight: 600;
    }
    #location{
        width:78px;
        height:30px;
        border-radius:3px;
        opacity:0.9;
        background:#9c9a9a;
        color:#fff;
        position: fixed;
        bottom:3%;
        right:25%;
        z-index: 2147483650;
        text-align:center;
        line-height: 30px;
        cursor:pointer;
        font-weight: 600;
    }
	</style>
	
	<title>地图展示</title>
</head>
<body>
    <div id="allmap" allowfullscreen></div>
</body>
</html>
<script type="text/javascript">

function initialize(point){
	// 百度地图API功能
    var map = new BMap.Map("allmap",{minZoom:1,maxZoom:30});    // 创建Map实例

    	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	  
	map.setCurrentCity("上海");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    if(point==null||point==undefined){
        point={};
        point.longitude='121.4'
        point.latitude='31.2'
    }

    console.log(point.longitude,point.latitude)
    map.centerAndZoom(new BMap.Point(point.longitude,point.latitude), 18);  // 初始化地图,设置中心点坐标和地图级别

    createButton()
} 

function createButton(){
    var allmap=document.getElementById('allmap');

    if(document.getElementById('fullscreen')==null){
        
        var fullscreen=document.createElement('div')
        fullscreen.id="fullscreen"
        fullscreen.innerHTML="全屏"
        allmap.appendChild(fullscreen)
        fullscreen.onclick=function(){
            toggleFullscreen(allmap)
        }        
    }

    if(document.getElementById('location')==null){
        
        var getLocation=document.createElement('div');
        getLocation.id="location";
        getLocation.innerHTML="定位";

        allmap.appendChild(getLocation)
        getLocation.onclick=function(){
            getUserLocation();
        }       
    }
}   

//切换全屏
function toggleFullscreen(ele){
    if(ele.hasAttribute('fullscreen')){
        eleCancelFullscreen();
        ele.removeAttribute('fullscreen')
        fullscreen.innerHTML="全屏"
    }else{
        ele.setAttribute('fullscreen','fullscreen');
        eleFullscreen(ele) 
        fullscreen.innerHTML="退出全屏"
    }
}  

//进入全屏
function eleFullscreen(ele){
    if(ele.requestFullscreen){
        ele.requestFullscreen()//w3c全屏
    }else if(ele.webkitRequestFullScreen){
        ele.webkitRequestFullScreen()//webkit全屏
    }else if(ele.mozRequestFullScreen){
        ele.mozRequestFullScreen()//moz全屏
    }else{
        return false;
    }
}
//退出全屏
function eleCancelFullscreen(){
    if(document.exitFullscreen){
        document.exitFullscreen()//w3c退出全屏
    }else if(document.webkitCancelFullScreen){
        document.webkitCancelFullScreen()//webkit退出全屏
    }else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()//moz退出全屏
    }else{
        return false;
    }    
}

function getUserLocation() {
    function successCallback(position) {
        if(position){
            var point={};
            point.longitude = position.coords.longitude
            point.latitude = position.coords.latitude
            initialize(point)  
            return point;  
        }else{
            throw new Error('未成功获取位置')
        }
    }
    function errorCallback(e){
        throw new Error('定位失败：原因'+JSON.stringify(e))
    }
    var options = {
        enableHighAccuracy: true,
        timeout:30000,
        maximumAge:90000
    }
    navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)
    //navigator.geolocation.watchPosition(successCallback, errorCallback, options)
}

</script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PTPDSnKbqGZXXu8uOfH1f2fioGCbcvhP&callback=initialize"></script>

猜你喜欢