0

ユーザーが 2 つのウェイポイント (出発地と目的地) を入力し、ボタンをクリックして道案内の旅程とルート パスが地図上にプロットされた地図を取得できる、比較的単純な Web アプリがあります。

このアプリは、フォーム、旅程、地図を別々の「タブ」で表示し、タブの選択に基づいてレイヤーを表示および非表示にできるようにレイアウトされていました。

奇妙なことに、画鋲 (ウェイポイント) とルート パスは正しくプロットされていましたが、マップの境界は守られていませんでしたが、マップは常に最小ズーム (ワールド ビュー全体) までズームアウトされていました。マップが表示されている場合、それらのルート パスの境界が受け入れられ、マップは期待どおりに機能しました。

この例はここにあります: http://jsfiddle.net/junto/DMR2T/

マップが表示されているときに [Get Directions] をクリックすると、マップが正しい範囲にズームされます。次に、地図を切り替えて、もう一度 [ルート案内] をクリックします。マップを切り替えて表示に戻します。マップのズーム レベルと境界が正しくないことがわかります。

Google Chrome、Safari、Firefox の最新ビルドでは、すべてこの問題が発生します。Internet Explorer にはありません。

これはバグですか？

4

1 に答える 1

3

私の推測では、ズームと境界を適切に計算するために、マップはその表示サイズを知る必要があります。マップがそれを認識するためには、マップが表示されている必要があります。したがって、回避策は、マップを非表示にするのではなく、画面外に移動することです。

ここで私の更新された例を参照してください: http://jsfiddle.net/ZWzjC/

私の例では、負の左マージンを設定しただけです。可視性を維持しながら何かを画面の外に移動するには、もっと賢い方法があると確信しています。visibility:hidden を使用してみましたが、マップを正しく非表示にできないようです。display:none は機能しません。これは、マップの次元が 0 になるためです。これは、おそらく .toggle() が内部的に使用するものです。

于 2012-05-03T16:18:47.653 に答える