在全屏嵌入Bing地圖

anuyone是否知道是否可以在全屏中嵌入bing地圖？
因此，地圖可以始終填充背景並簡單地覆蓋頂部的幾個元素。在全屏嵌入Bing地圖

我似乎無法實現100％iframe和bing的幫助沒有那麼有用。

謝謝

來源

2012-03-29 ion

你不能「全屏嵌入必應地圖」，但它肯定可以使用CSS來設置包含地圖的DIV的高度和寬度設置爲瀏覽器的100％，然後最大化（或設置爲全屏）瀏覽器窗口 - 是您的意思？

來源

2012-03-29 18:15:41

如果我正確理解你，你想達到使地圖填滿整個屏幕的效果，有點像使用地圖作爲背景，然後在頂部覆蓋其他元素？如果是這樣，您應該能夠通過以下位置輕鬆完成此任務：固定CSS Property。

 <div id='yourMapDiv' style="position: fixed; top: 0px; 
      left: 0px; right:0px; bottom:0px; z-index: 100"> 
     </div>

這話說yourMapDiv將有一個固定的位置，該位置從屏幕的所有四個邊緣0的象素遠。實際上，你是橫跨整個瀏覽器屏幕yourMapDiv，無需指定明確的長度或寬度，並調整大小將不會導致滾動條出現：

enter image description here

這裏是要全屏幕鍍鉻的樣子：

enter image description here

在上面的例子中我指定的100的z指數yourMapDiv，要說明，如果你希望其他元素出現在地圖上面，你將不得不分配較高的Z - 索引給他們。

來源

2012-03-29 22:52:40

這並不爲我工作。我錯過了什麼嗎？ http://jsfiddle.net/dstarsboy/C284d/ – 2013-04-03 23:12:39

它不起作用，因爲您將樣式應用於父div而不是iframe本身 – 2013-04-06 00:20:05

爲了確保它在大多數瀏覽器中，我建議設置寬度爲100％這樣的：

<iframe width="100%" height="280" frameborder="0" src="http://www.bing.com/maps/embed/viewer.aspx?v=3&cp=40.782498~-73.965515&lvl=14&w=100%&h=280&sty=r&typ=d&pp=Central%20Park%2C%20NY~~40.782379~-73.965858&ps=&dir=0&mkt=en-us&src=SHELL&form=BMEMJS"></iframe>

通知我雙方的iframe的寬度設定100％還有w查詢字符串參數。似乎運作良好。

來源

2013-04-03 23:48:42

上面的答案不適用於我。要獲取地圖填寫沒有任何邊框或滾動條瀏覽器窗口，我不得不使用下面的最小的HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
<title>Bing Map</title> 
<meta charset="utf-8" /> 
<style> 
#myMap { 
    height: 100%; 
} 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
</style> 
</head> 

<body> 
    <div id="myMap"></div> 

    <script type='text/javascript'> 

    function GetMap() { 
     new Microsoft.Maps.Map('#myMap', { 
      credentials: 'your_bing_key' 
     }); 
    } 
    </script> 

    <script type='text/javascript' 
    src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer> 
    </script> 
</body> 
</html>

來源

2017-05-17 17:37:42

在全屏嵌入Bing地圖

回答

相關問題