1

地図上に画像を重ねて表示できるようにしたいフルページの Google マップがあります。これまでのところ、私は次のコードを持っています:

<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    #wrapper { position: relative; }
    #over_map { position: absolute; background-color: transparent; top: 10px; left: 10px; z-index: 99; }
    #over_map_right { position: absolute; background-color: transparent; top: 10px; right: 10px; z-index: 99; }

</style>

....

<body>  

<div id="wrapper">

    <div id="map_canvas" style="width:100%; height:100%"></div>

    <div id="over_map">Left hand stuff goes here</div>

    <div id="over_map_right">right hand stuff goes here</div>
</div> 
</body>

このコードは私には正しいように思えますが、開くと真っ白な画面が表示されます

<div id="over_map">Left hand stuff goes here</div>

<div id="over_map_right">right hand stuff goes here</div>

表示されます。

これを行う別の方法はありますか？iframe などでそれを行うことはできますか?

マイク

4

3 に答える 3

5

問題は、Google マップがheight機能するために具体的な属性が必要なことです。

例を次に示します: http://jsfiddle.net/9qDhX/

height: 400px;動作height: 100%;しますが、空白の画面が残ることに注意してください。

「フルスクリーン」マップを取得するには、さまざまな回避策があります。最良のクロスブラウザのものは、ある種の jQuery を使用map_canvasして現在のウィンドウ サイズに基づいて高さを設定し、高さをリセットするためにウィンドウのサイズを変更するリスナーを使用します。

于 2013-01-31T01:25:36.153 に答える
2

Jeff-Meadowsの回答に加えて。

全画面マップを取得するには:

jquery onload イベントを使用できます

    $(function () {
        $("#map_canvas").css("height", $(window).height());
    });

これにより、フルスクリーンが有効になります

于 2013-11-14T01:23:46.843 に答える