2

私はEmber.jsを使用して、Googleマップを含むライトボックスを実装しています。問題は、マップがライトボックスにある場合、予想した場所の左側にシフトしてレンダリングされることです。下部と右側の残りのスペースは、マップをドラッグできない空白の領域です。メインページで同じマップビューをレンダリングしても問題ありません。また、開発者ツール(ChromeとFirefox)を開くと、マップが正しくなることにも気づきました。それがなぜなのか私にはわかりません。

これがJSFiddleです:http://jsfiddle.net/hekevintran/qt5k4/9/

スクリーンショット(一番下のマップはライトボックスにあります):

ここに画像の説明を入力してください

HTML:

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
{{view App.MapView}}    
</script>

<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;">
    {{view App.MapView}}
</div>
</script>

JavaScript:

App = Ember.Application.create({});

App.MapView = Ember.View.extend({
    installMap: function () {
        var mapOptions = {
            // San Francisco
            center: new google.maps.LatLng(37.773429,-122.424774),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        new google.maps.Map(this.$()[0], mapOptions);
    },
    didInsertElement: function () {
        this.$().css(
            {'height': '350px',
             'width': '350px'}
        );
        this.installMap();
    }
});

Lightbox = Ember.Object.extend({
    isVisible: false,
    open: function () {
        this.set('isVisible', true);
    },
    close: function () {
        this.set('isVisible', false);
    },
    view: function () {
        var controller = this;
        return Ember.View.extend({
            templateName: 'lightbox',
            controller: controller,
            isVisibleBinding: 'controller.isVisible'
        })
    }.property()
});

lightbox = Lightbox.create();

Ember.View.create({
    templateName: 'buttons',
    controller: Ember.Object.create({
        openBox: function () {
            lightbox.open();
        },
        closeBox: function () {
            lightbox.close();
        }
    })
}).append();

lightbox.get('view').create().append();
4

1 に答える 1

1

問題は、ページを最初にロードしたときにライトボックスでマップを作成していることです。lightbox.get('view').create().append();これは、JavaScript ページの最後で呼び出したときに発生します。

しかし、ライトボックスはまだ表示されていないため、Maps API が混乱します。おそらくresize、ライトボックスを開いた後にマップ上でイベントをトリガーすることで問題を回避できますが、必要になるまでマップとライトボックス ビューを作成しないことをお勧めします。

これで問題が修正され、ボーナスとして、読み込み時に 2 番目のマップを作成する必要がなくなるため、ページの読み込みが速くなります。

これを行うために、コードの最後の部分を次のように置き換えました。

var lightbox;

Ember.View.create({
    templateName: 'buttons',
    controller: Ember.Object.create({
        openBox: function () {
            if( ! lightbox ) {
                lightbox = Lightbox.create();
                lightbox.get('view').create().append();
            }
            lightbox.open();
        },
        closeBox: function () {
            if( lightbox ) {
                lightbox.close();
            }
        }
    })
}).append();

ご覧のとおり、lightbox = Lightbox.create();とのlightbox.get('view').create().append();呼び出しを 内に移動しましたopenBox()が、この関数が最初に呼び出されたときにのみ呼び出すようにしています。

closeBox()まだ作成されていない場合、存在しないライトボックスを閉じようとしないように、ガードも追加しました。

これは、作業コードの更新されたフィドルです。

于 2013-03-15T07:14:40.933 に答える