Question

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

Answer 1

这是一个jQuery实现。

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

在CSS中：

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

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

未经测试，但其中的某些内容应该有效。

Answer 2

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

Answer 3

在Dom准备好了：

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

在输入全屏按钮上单击：

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

在退出全屏按钮上单击：

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

您可以找到代码here

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

Answer 5

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

如何创建节目全屏按钮以将我的Google地图页面切换为全屏？

5 个答案: