2

非表示の div を表示するときにサイズ変更の問題を抱えている人がたくさんいますが、別の解決策が必要なわずかに異なる問題が発生しています。Google マップは正常に動作しますが、一度にページのステップのみを表示するウィザードを作成しています。非表示の div を有効にすると、マップが表示されるまでしばらくの間、マップはベージュのままになり、まったく読み込まれないこともありますが、非表示の div の外に移動して本体セクションに移動すると、すぐに読み込まれます。わかりません。エラーは表示されません。助けてください。通常、マップを更新すると問題は解決しますが、 

<div id="step-3" onshow="setTimeout(google.maps.event.trigger(map, 'resize'), 3000)">
    <h2 class="StepTitle">Step 3 Content</h2>
    <label>Select Job Locations: </label>
    <div id="map-canvas" style="width:100%; height:400px;"></div>
    <br>
    <label>Zip codes in region:</label><small> (manually add zipcodes seperated in comma space form)</small>
    <br>
    <textarea id="zipcodes"style="width:100%;"></textarea><br>
</div>

思ったように直らない。

4

4 に答える 4

5

マップのdiv、またはその親、またはその親 (任意の先行オブジェクト) にdisplay:noneスタイルが設定されている場合、マップを作成すると、マップ ビューが正しく初期化されません。マップ ビューを再初期化するには、マップでサイズ変更イベントをトリガーする必要があります。電話してみてください：

google.maps.event.trigger(map, "resize");

divが表示されるようになった直後。divをクリックして表示するときに、サイズ変更トリガーを小さなタイムアウトに入れることができることを確認してください。

于 2016-06-02T15:41:40.623 に答える
4

今日も同じ問題があり、解決に何時間も費やしました。私は2つの問題を抱えていました:

  1. ライブラリによって作成されたため、マップオブジェクトはありませんでした。
  2. マップは の中になかった<iframe>ので、<div>.

しかし、マップのサイズ変更イベントが自動的にトリガーされるため、ウィンドウのサイズが変更されるたびにマップが表示されることがわかりました。実際には、ウィンドウのサイズ変更イベントをトリガーするだけで、すべてが魔法のように機能します。

<div>javascript を使用して非表示を表示した後、これを試してください。

window.dispatchEvent(new Event('resize'));

Chrome と Firefox でテスト済み。fancybox2 ライブラリでテスト済み。

これが、単純な問題を解決するために API の内部に深く入るのが好きではない、私のような人々に役立つことを願っています。

于 2016-07-23T18:57:26.033 に答える
0

それがあなたのソリューションに合うかどうかはわかりませんが、回避策は、マップ要素が表示されているときにjQueryを使用してdivに追加し、非表示になっているときに削除することです。理想的ではありませんが、簡単に修正できる場合があります。

于 2016-06-02T15:06:00.977 に答える