HTML5全屏API和DIV

Question

所以我正在使用谷歌地图创建一个地理定位器工具.虽然您可以在页面上设置标记,但我想让Google Maps div全屏显示.

经过一些简短的研究,我遇到了http://demosthenes.info/blog/708/Introducing-the-HTML5-FullScreen-API,它为全屏API提供了一个开端.

我使用的Javascript与该页面上提供的相同,即:

<script>
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
</script>

现在,Map DIV设置为50%宽度,450px高度,使其在屏幕上看起来不错,当我全屏时,它仍然设置为它的父div的高度/宽度,所以div的实际大小不更改.

有没有办法更改地图高度/宽度,以便它将使用浏览器高度/宽度而不是父div？

Answer 1

你想在"全屏模式"浏览器中显示完整的MAP吗？

试试这个代码来处理

var elem = document.getElementById("idOfMAP");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

希望它能帮到你.