Bing Karte in Vollbild einbetten

Weiß anyone, ob es möglich ist, eine Bing-Karte im Vollbild einzubetten?
Damit die Karte immer den Hintergrund ausfüllen und einfach ein paar Elemente überlagern kann.Bing Karte in Vollbild einbetten

Ich kann nicht scheinen, dass mit 100% iframe zu erreichen und bing's Hilfe ist nicht so hilfreich.

Danke

Quelle

2012-03-29 ion

Sie können nicht „eine Bing Karte im Vollbild einbetten“, aber es ist durchaus möglich, CSS zu verwenden, um die Höhe und Breite des div setzt die Karte, die 100% des Browsers zu sein, und dann maximieren (oder auf Vollbild setzen) das Browserfenster - meinst du das?

Quelle

2012-03-29 18:15:41

Wenn ich Sie richtig verstehe, möchten Sie den Effekt erreichen, dass die Karte den gesamten Bildschirm ausfüllt, etwa so, als ob Sie die Karte als Hintergrund verwenden würden und dann andere Elemente überlagern würden? Dann sollten Sie dies problemlos über die Position CSS Property erledigen können.

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

Dies sagt yourMapDiv wird eine feste Position haben, die 0 Pixel von allen vier Rändern des Bildschirms entfernt ist. In der Tat sind Spanning Sie yourMapDiv über den gesamten Browser-Bildschirm, ohne explizite Länge oder Breite, und Neudimensionierung verursacht wird nicht erscheinen Bildlaufleisten angeben zu müssen:

enter image description here

Hier ist was los Vollbild in Chrome wie folgt aussieht:

enter image description here

In dem obigen Beispiel ich einen z-index von 100-yourMapDiv, zugeordnet zu zeigen, dass, wenn Sie andere Elemente wollen oberhalb der Karte angezeigt werden soll, müssen Sie einen höheren z zuweisen -Index für sie.

Quelle

2012-03-29 22:52:40

Das ist für mich nicht funktioniert. Fehle ich etwas? http://jsfiddle.net/dstarsboy/C284d/ –

Es funktioniert nicht, weil Sie den Stil auf das übergeordnete div und nicht den iframe selbst angewendet haben –

Um sicherzustellen, dass es in den meisten Browsern funktioniert, empfehle ich die Breite auf 100% wie diese Einstellung:

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

Hinweis I sowie die w-Abfrage-String-Parameter sowohl zu 100% auf der iframe width bin Einstellung . Scheint gut zu funktionieren.

Quelle

2013-04-03 23:48:42

Die Antworten oben funktionierten nicht für mich. eine Karte Um die Browser-Fenster ohne Grenzen oder Scrollbalken ausfüllen, hatte ich die folgende minimale HTML-Datei zu verwenden:

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

Quelle

2017-05-17 17:37:42

Antwort

Verwandte Themen