如何创建显示全屏按钮以将我的谷歌地图页面切换为全屏？答案

【问题标题】：How do I create a show full screen button to toggle my google maps page to be full screen?如何创建显示全屏按钮以将我的谷歌地图页面切换为全屏？
【发布时间】：2009-06-21 07:35:54
【问题描述】：

我的部分页面上集成了谷歌地图。我想创建一个切换按钮来在全屏和正常大小之间切换地图。因此，当您单击它时 - 地图会延伸到整个浏览器屏幕，然后再次单击它，它会恢复到页面上的原始大小。我该怎么做？

【问题讨论】：

您可能希望将问题重新表述为“如何创建一个 COM 控件来告诉 IE 将一些 Javascript 注入页面，以便 Google 地图始终全屏显示”以防止它被关闭与编程无关。

标签： javascript google-maps

【解决方案1】：

这是一个 jQuery 实现。

$("#map_toggler").click(function() {
  $("#map").toggleClass("fullscreen")
});

在 CSS 中：

#map {
  width: 400px;
  height: 200px;
}

#map.fullscreen {
  position: fixed;
  width:100%;
  height: 100%;
}

未经测试，但类似的东西应该可以工作。

【讨论】：

退出全屏模式怎么样？比如按ESC键，那你会怎么做？
让文档监听转义键并做出反应：$(document).keyup(function(e) { if (e.keyCode == 27) { $('#map').removeClass('fullscreen'); // esc } });

【解决方案2】：

如果您的页面上有地图，您需要做的就是编写一些 javascript 来调整包含地图的 DIV 的大小。我还没有实现一个调整 DIV 大小以填充浏览器的示例，但 here 是一个从 javascript 切换地图 div 大小的示例（我使用 mooTools 在元素上设置 style.width，但您可以使用任何你喜欢操作 DOM 的东西）。

【讨论】：

如果你使用 jQuery，你可以使用 "animate" - docs.jquery.com/Effects/animate
一个很好的建议或“补间”，如果你喜欢牛 (mootools.net/docs/core/Fx/Fx.Tween)。
优秀。我一直在寻找这样的东西，但直到我看到它才知道。感谢您发布您的沙盒供我们使用。

【解决方案3】：

Dom 准备就绪：

初始化地图并设置中心
获取包含地图的 div 的当前 CSS 大小

在进入全屏按钮点击时：

更新 CSS（大小和位置）
触发调整地图大小方法
设置地图中心

退出全屏按钮点击：

更新 CSS（回到初始大小和位置）
触发调整地图大小方法
设置地图中心

您可以找到代码here

【讨论】：

【解决方案4】：

现在我们有了一个全屏 API https://developer.mozilla.org/en/DOM/Using_full-screen_mode，您只需选择要设置为全屏的 DOM 元素并在其上调用全屏 API。像这样的

var elem = document.getElementById("myvideo");
if (elem.requestFullScreen) {
  elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

【讨论】：

【解决方案5】：

点击后，您必须调整显示地图的 div 的大小.....我认为它很简单

【讨论】：