2012-03-29 14 views
2

bingマップをフルスクリーンに埋め込むことができるかどうかは、anuyoneが知っていますか?
マップは常に背景を塗りつぶし、上にいくつかの要素を重ねるだけです。Bingマップをフルスクリーンに埋め込む

私は100%iframeでそれを達成できないようですが、ビングの助けはそれほど役に立ちません。

は、あなたが「フルスクリーンでのBing地図を埋め込む」ことはできませんが、それは、ブラウザの100%としマップを含むDIVの高さと幅を設定するためにCSSを使用することは確かに可能だあなた

答えて

0

ありがとうございましたブラウザウィンドウを最大化する(またはフルスクリーンに設定する)ことは意味ですか?

3

私が正しく理解していれば、マップを画面全体に塗りつぶしたり、地図を背景として使用したり、他の要素を上に重ねたりするなどの効果を得たいですか?もしそうなら、あなたは固定のCSS Propertyの位置でこれを簡単に達成できるはずです。

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

これはyourMapDivは0ピクセル離れたスクリーンの4つ全ての縁部からある一定の位置を有するであろうと言っています。実際には、明示的な長さや幅を指定しなくても、全体のブラウザ画面全体にyourMapDivにまたがるされ、そして再サイジングは、スクロールバーが表示されるように引き起こしません。

ここenter image description here

は、フルスクリーンを行くものですChromeは次のようになります。私はあなたが他の要素がマップ上に表示したい場合は、あなたが高いZを割り当てる必要がありますことを示すために、yourMapDivに100のzインデックスを割り当て上記の例で

enter image description here

彼らに指摘する。

+0

: はマップは任意の境界線やスクロールバーなしでブラウザのウィンドウを記入取得するには、私は次の最小限のhtmlファイルを使用する必要がありました。何か不足していますか? http://jsfiddle.net/dstarsboy/C284d/ –

+0

iframe自体ではなく、親divにスタイルを適用したため、動作しません –

1

それはほとんどのブラウザで動作することを確認するために、私はこのように100%に幅を設定することをお勧めします:私はインラインフレーム幅だけでなく、ワットクエリ文字列パラメータの両方に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> 

お知らせ。うまくいくと思う。

1

上記の回答は私には役に立たなかった。これは私のために動作しません

<!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> 
関連する問題