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两个按钮，这样总可以吧？试了一下，这样可以了。

代码如下