Question

anuyone是否知道是否可以在全屏中嵌入bing地图？因此，地图总是可以填充背景，只需在顶部叠加几个元素。

我无法用100％的iframe实现这一点，并且bing的帮助没那么有用。

谢谢

Answer 1

如果我理解正确，你想要实现让地图填满整个屏幕的效果，有点像使用地图作为背景，然后将其他元素叠加在顶部？如果是这样，您应该可以通过以下位置轻松完成此操作：已修复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

以下是Chrome全屏显示的内容：

enter image description here

在上面的示例中，我将z-index指定为100到yourMapDiv，以说明如果您希望其他元素出现在地图上方，则必须为它们分配更高的z-index。 / p>

Answer 2

为了确保它适用于大多数浏览器，我建议将宽度设置为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宽度和w查询字符串参数上都设置了100％。似乎运作良好。

Answer 3

上面的答案对我不起作用。要使地图填写浏览器窗口而没有任何边框或滚动条，我必须使用以下最小的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>

Answer 4

你不能“全屏嵌入Bing地图”，但是当然可以使用CSS将包含地图的div的高度和宽度设置为浏览器的100％，然后最大化（或设置为全屏）浏览器窗口 - 这是你的意思吗？

全屏嵌入Bing地图

4 个答案: