Embed Bing map in fullscreen

问题

Does anuyone know if it is possible to embed a bing map in fullscreen??
So that the map can always fill the background and simply overlay a few elements on top.

I cannot seem to achieve that with 100% iframe and bing's help is not that helpful.

Thank you

回答1:

If I understand you correctly, you want to achieve the effect of having the map fill up the entire screen, sort of like using the map as a background, and then have other elements overlaid on top? If so, you should be able to accomplish this easily via the position:fixed CSS Property.

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

This is saying yourMapDiv will have a fixed position that is 0 pixel away from all four edges of the screen. In effect, you are spanning yourMapDiv across the entire browser screen, without having to specify explicit length or width, and re-sizing will not causing scroll bars to appear:

enter image description here

Here is what going full screen in Chrome looks like:

enter image description here

In the example above I assigned a z-index of 100 to yourMapDiv, to illustrate that if you want other elements to appear above the map, you will have to assign a higher z-index to them.

回答2:

The answers above did not work for me. To get a map fill out the browser window without any borders or scrollbars, I had to use the following minimal html file:

<!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>

回答3:

To ensure it works in most browsers, I recommend setting the width to 100% like this:

<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>

Notice I'm setting 100% on both the iframe width as well as the w query string parameter. Seems to work well.

回答4:

You can't "embed a Bing Map in fullscreen", but it's certainly possible to use CSS to set the height and width of the div containing the map to be 100% of the browser, and then maximise (or set to fullscreen) the browser window - is that what you mean?

来源：https://stackoverflow.com/questions/9926576/embed-bing-map-in-fullscreen

标签

embed

fullscreen

bing-maps