如何创建一个显示全屏按钮来将我的谷歌地图页面切换为全屏？

嗨，大家好我有一个谷歌地图集成在我的页面的一部分，我想创建一个切换按钮来切换全屏和正常大小之间的地图。因此，当你点击它时，地图会扩展到填满整个浏览器屏幕，然后再次单击它，它会在页面上恢复到原始大小。我会怎么做？如何创建一个显示全屏按钮来将我的谷歌地图页面切换为全屏？

来源

2009-06-21 Ali

您可能要重新制定了一个问题，“如何创建一个COM控件会告诉IE到一些JavaScript注入到页面，以便谷歌地图始终显示全屏”，以防止它被关闭，因为没有编程相关。 – 2009-06-21 07:41:40

哦耶 - 对不起回合:) – Ali 2009-06-21 08:09:58

这里是一个jQuery的实现。

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

在CSS：

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

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

未经检验的，但沿该路线的东西应该工作。

来源

2009-06-28 05:34:54

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

来源

2009-06-21 12:38:22 RedBlueThing

如果你使用jQuery，你可以使用“动画” - http://docs.jquery.com/Effects/animate – 2009-06-22 18:41:39

上点击你要调整你的DIV，你必须显示在地图.....我认为它简单

来源

2009-06-28 05:19:10

DOM的准备：

初始化地图和集中心
获取div的CSS的大小包含地图

在进入全屏按钮点击：

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

在退出全屏按钮点击：

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

你可以找到的代码here

来源

2012-01-02 12:27:26 lou

现在我们有一个Fullscreen 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(); 
}

来源

2012-07-15 15:12:57 andrei

如何创建一个显示全屏按钮来将我的谷歌地图页面切换为全屏？

回答

相关问题