javascript - jquery モバイルでページを変更した後、Google マップが部分的に読み込まれます

Question

私はjqueryモバイルのホームページを持っています。別のページへのリンクがあり、マップは画面全体にヘッダーが上にあります。マップでそのリンクに移動すると、マップが部分的に読み込まれ (スクリーンショットでわかるように)、移動しようとするとマップが元に戻ります。

ご覧のとおり、キャンバスは適切に読み込まれています。Google マップのロゴと利用規約が下にあるからです。それの何が問題なのですか？

1 つの事実: マップ ページを更新すると (ホームページから開始しない)、またはマップ ページでブラウザー ウィンドウのサイズを変更すると、完全に正常に表示されます。

Answer 1

マップ上で更新をトリガーします。これは、マップコンテナのサイズが変更された場合、または最初に非表示になってから表示された場合に発生する可能性があります。たとえば、jQuery UIタブを使用していて、マップが非表示のタブで初期化されている場合にも、同じことが起こります。

google.maps.event.trigger(map, 'resize')

Answer 2

マップは の DOM に読み込まれるpageinitため、正しい画面/ウィンドウ メジャーを取得できません。pagebeforeshowしたがって、マップが画面サイズを取得できるように、マップの初期化をバインドする必要があります。

仕組みは次のとおりです。

$(document).on('pagebeforeshow', '[data-role="page"]#map' , function()

それ以外の

$(document).bind('pageinit', function()

Answer 3

私は同じ問題を抱えていましたが、最終的に「サイズ変更」を2回トリガーすることで解決しました。このような：

$("#mapelement").height(10);
$("#mapelement").width(10);
google.maps.event.trigger(googlemap, 'resize');
setTimeout(function() {
    adjustMapSize();  // set the correct size of #mapelement
    google.maps.event.trigger(googlemap, 'resize');
    updateMap();     // center the map and display markers
}, 500);

Answer 4

$(document).on('pageshow', "#name-page", function() {
    initialize();
});

これを試して、