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();
}

希望它能帮到你。