1

ウェブサイトで Google マップを機能させるのに苦労しています。問題は、マップが次のように表示されることです。

私のウェブサイトの Google マップ (ノルウェー語の変数)

私が理解しているのは、div が表示された後にオブジェクトのサイズを変更する際の既知の問題です。( からdisplay: none;に変更display: block;)

私は JQueryUI Tabs と、display: none;タブをカプセル化する div を使用しています。

タブを削除して、開始時にすべてをブロックとして表示してから、変更を加えてみましたが、window.loadロード後にウォッチが勝手に動き回るのはかなり醜いです。

このJSFiddleは、私がそれをどのように望んでいるのか (簡略化) を示していますが、適切に機能させることができないため欠陥があります (マップがまったく表示されません)。

それを行う別の方法はありますか? または、マップ機能のために別の種類のレイアウトを見つける必要がありますか?

4

3 に答える 3

3

信頼できる唯一の方法は、 のキャンバスでマップを初期化してからdisplay:block非表示にすることです。これが $(function() {...}) 構造体で行われる場合、マップが非表示になる前に表示されるべきではありません。

また、最初はキャンバスを非表示にし、キャンバスを表示した後、最初に必要になったときにマップを初期化することもできます。

いずれにしても、キャンバスが表示されているときにのみマップを初期化してください。

于 2013-04-23T11:40:14.237 に答える
1

使用する

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  

$("#map_canvas").css("height", $(window).height());
于 2013-11-13T06:11:10.313 に答える