在全屏嵌入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地图

回答

相关问题