10

ページにリーフレット マップを表示すると、奇妙な動作が発生します。通常、マップは期待どおりにレンダリングされ、うまく機能します。ただし、JavaScriptで検出したフォームでエラーが発生した場合にのみマップを表示したい。そのため、親を設定し<div id="map">てdisplay: none;後で必要に応じて表示すると、タイルが読み込まれず (または部分的にのみ読み込まれて続行されない)、マップが奇妙に「ずれ」ます (js で定義されているように中央に配置されません)。

display: none;私の考えでは、ブラウザが親内の要素をレンダリングしないのではないでしょうか?

$(document).ready(...)関数でマップを非表示にしてみましたが、違いはありませんでした。マップを非表示にして表示するとすぐに、同じ動作が繰り返されます。これを Firefox 44.0 と Chromium 48.0 でテストしましたが、動作は一貫しています。

どんなヒントでも役に立ちます。これは、リモートで読み込まれた要素 (ajax) の一般的な動作ですか?

編集1：

これで解決策と回避策がわかりました (以下の回答を参照してください) が、これがリモートで読み込まれた要素のグローバルな動作であるかどうかはまだわかりません。説明をありがとう。

編集2：

説明については、受け入れられた回答を参照してください。

4

3 に答える 3

22

何が起こっているかというと、 CSS ルールL.Mapが原因で、インスタンスがその寸法を正しく計算できないということです。display:none適切な寸法が得られない場合、ロードするタイルの数とレイアウト方法がわからず、何もロードされません。XHRはそれとは何の関係もありません。マップは XHR の対象を認識していません。これが問題です。

インスタンスでメソッドdisplay:noneをdisplay:block呼び出すように切り替えた後。マップを強制的に (再) レンダリングします。invalidateSizeL.Map

マップ コンテナーのサイズが変更されたかどうかを確認し、変更された場合はマップを更新します。マップ サイズを動的に変更した後に呼び出し、デフォルトでパンをアニメーション化します。options.pan が false の場合、パンは行われません。options.debounceMoveend が true の場合、メソッドが連続して何度も呼び出されても頻繁に発生しないように moveend イベントを遅らせます。

http://leafletjs.com/reference.html#map-invalidatesize

于 2016-02-05T11:01:25.027 に答える
0

回避策は、次のようにページが読み込まれた後にのみマップを非表示にすることです。

$( window ).load(function () {
    $('#map').hide();
});

このようにして、マップは完全にレンダリングされた後にのみ非表示になります。この後にそれを$('#map').show();表示すると、問題がないと予想されるロードされたタイルを含むマップが表示されます。

于 2016-02-05T09:32:11.467 に答える