如何創建一個顯示全屏按鈕來將我的谷歌地圖頁面切換爲全屏？

嗨，大家好我有一個谷歌地圖集成在我的頁面的一部分，我想創建一個切換按鈕來切換全屏和正常大小之間的地圖。因此，當你點擊它時，地圖會擴展到填滿整個瀏覽器屏幕，然後再次單擊它，它會在頁面上恢復到原始大小。我會怎麼做？如何創建一個顯示全屏按鈕來將我的谷歌地圖頁面切換爲全屏？

來源

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

如何創建一個顯示全屏按鈕來將我的谷歌地圖頁面切換爲全屏？

回答

相關問題