Вставить карту Bing в полноэкранный режим - PullRequest
Новая
       58

Вставить карту Bing в полноэкранный режим

2 голосов
/ 29 марта 2012

Знает ли кто-нибудь, можно ли встроить карту Bing в полноэкранный режим?
Чтобы карта всегда могла заполнить фон и просто наложить несколько элементов сверху.достичь этого с помощью 100% iframe и помощи Bing не так уж и полезно.

Спасибо

Ответы [ 4 ]

3 голосов
/ 30 марта 2012

Если я вас правильно понимаю, вы хотите добиться эффекта, при котором карта заполняет весь экран, что-то вроде использования карты в качестве фона, а затем наложение других элементов сверху? Если это так, вы сможете легко выполнить это с помощью позиции: fixed 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.

1 голос
/ 17 мая 2017

Ответы выше не сработали для меня. Чтобы получить карту, заполняющую окно браузера без границ или полос прокрутки, мне пришлось использовать следующий минимальный 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>
1 голос
/ 04 апреля 2013

Чтобы убедиться, что он работает в большинстве браузеров, я рекомендую установить ширину на 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>

Обратите внимание, что я устанавливаю 100% как для ширины iframe, так и для параметра строки запроса w. Кажется, работает хорошо.

0 голосов
/ 29 марта 2012

Вы не можете «встроить карту Bing в полноэкранный режим», но, безусловно, возможно использовать CSS, чтобы установить высоту и ширину div, содержащего карту, равным 100% от браузера, а затем развернуть его (или установитьполноэкранный) окно браузера - это то, что вы имеете в виду?

...