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%;
}