Openlayers4中的全屏

概述

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽度的100%,高度还是原来地图的高度。本文讲述如何解决此问题。

效果

解决

解决此问题的关键还是在于全屏的时候地图的容器的高度也得变成100%。因此,解决代码如下:

html,
body,
#map{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #0f1467;
}

#map{
  height: 50%;
}

#map:-moz-full-screen {
  height: 100%;
}
#map:-webkit-full-screen {
  height: 100%;
}
#map:-ms-fullscreen {
  height: 100%;
}

#map:fullscreen {
  height: 100%;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12160
来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

50980
来自专栏非著名程序员

Android 自定义 view 动画按钮

昨天偶偶然看见UI 给的一个交互的效果,原图如下 ? 就是下面的loginbutton,于是大概模仿了一下, 并没有做这个UI的全部效果,有兴趣的可以完善后面...

25680
来自专栏web编程技术分享

三分钟学会用 js + css3 打造酷炫3D相册

90450
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

21320
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

28560
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 基础概念

6710
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20450
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

22030
来自专栏Coco的专栏

妙用 scale 与 transfrom-origin,精准控制动画方向

17640

扫码关注云+社区

领取腾讯云代金券