2

始める前に、私はすでに次の SO 記事を上から下まで読み、解決策を複製しようとしましたが、今のところできないことを明確にしたいだけです。

Foundation の Google Map API がモーダルを正しく表示しないことを明らかにする

Reveal Modal 内の Google Map API が完全に表示されない

google.maps.event.trigger(map, 'resize') の使い方

Zurb のファウンデーション イシュー リストはこちら - > https://github.com/zurb/foundation/issues

私の問題は同じようです.http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.htmlで彼のソースコードをチェックしたところ、彼は修正されたようですが、私は修正できません.

私の問題を引き起こしているのが Foundation 3 と 4 の違いであるかどうかはわかりません (それらの SO 投稿はほぼ 1 年前のものであるため) が、いずれにせよ、サイズ変更メソッドが機能しているようには見えません。

db の基本ページへのリンクは次のとおりです -> http://db.tt/gdl3wVox

ご覧のとおり、小さな地図は問題なく動作しますが、[大きな地図を表示] のリンクをクリックすると、2 つの問題があります。

  1. 主な問題 - マップの 1/3 しかレンダリングされていません。Chrome または IE で要素を検査するか、Dev Tools (F12) を開くと、マップが再レンダリングされ、div の全幅に収まります。
  2. マイナーな問題 - 表示されたマップは、小さいマップのようにマーカーの中心に配置されていません。

このページに 2 つの要素を追加する以外、foundation.css はカスタマイズされていません。したがって、彼らのスタイルを掘り下げる必要はありません。

#mini-map  {
  min-width: auto;
  max-width: 100%;
  width: 220px;
  min-height: auto;
  max-height: 100%;
  height: 154px; }

#big-map  {
  min-width: auto;
  max-width: 100%;
  width: 600px;
  min-height: auto;
  max-height: 100%;
  height: 300px; }

google.maps.event.trigger(map, 'resize');他の投稿で説明されているように修正を実装しました（ 2つのマップがあるため、にmap置き換えます）bigmap

         <script>
            var ourLocation = new google.maps.LatLng(46.213769, -60.266018);

            function initialize() {
                var mapOptions = {
                    center: ourLocation,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                minimap = new google.maps.Map(document.getElementById("mini-map"), mapOptions);
                bigmap = new google.maps.Map(document.getElementById("big-map"), mapOptions);

                minimarker = new google.maps.Marker({
                    map: minimap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
                bigmarker = new google.maps.Marker({
                    map: bigmap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
            }
            initialize();
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal();
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

しかし、このスクリプト：

        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal(); /* Problem is here */
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

私にエラーを引き起こしているようです。Chrome の Dev Tool でコンソールを表示すると、次のように表示されます。

Uncaught TypeError: Object #<Object> has no method 'reveal' map.html:96

ドリルダウンすると、別の 2 つのエラーが表示されます。

(anonymous function) map.html:96

handler.proxy zepto.js:933

上記のトピックで修正を複製したため、なぜ機能しないのかわかりません。「解決済み」の問題を再訪することに罪悪感を覚えますが、これを何時間もいじりましたが、以前の投稿のように機能するようには見えません。

明確化していただければ幸いです。事前に感謝します。

4

1 に答える 1

3

使用する必要があります

$('#myModal').foundation('reveal', 'open');

モーダルを表示します。

また、次google.maps.event.trigger(bigmap, 'resize');の open イベントにバインドする必要があります#myModal。

$('#myModal').on('opened', function () { google.maps.event.trigger(bigmap, 'resize'); });

bigmap を確認すると、変数のスコープ外です。

于 2013-05-22T14:19:57.427 に答える