3

私はグーグルマップのビューを作成しようとしていますが、実際に見つけたいくつかの例に従ってそれを機能させました。

問題は、ページが最初に表示されたときにのみマップが正しく描画されることです。ルートが変更された後、マップが再度描画されると、「歪んだ」ように見えます。

私が見つけた例は、アプリの「1ページ」の部分です。

意見：

App.LocationView = Ember.View.extend({
    templateName: 'location',
    MapView: Ember.View.extend({
        map: null,
        latitudeBinding: 'controller.content.geometry.lat',
        longitudeBinding: 'controller.content.geometry.lng',
        didInsertElement: function() {
            var mapOptions = {
                center: new google.maps.LatLng(0, 0),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            };
            var map = new google.maps.Map(this.$().get(0),mapOptions);
            this.set('map',map); //save for future updations
            this.$().css({ width: "550px", height: "400px" });
        },
        reRenderMap : function(){
            var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
        this.get('map').setCenter(newLoc);
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
                map: this.get('map')
            });
        }.observes('latitude','longitude')
    })
});

{{view view.MapView}}'location'テンプレートで、div＃map-holder内にマップを表示します。

また、このCSSをdivに適用して、マップコントロールをいじるブートストラップを「修正」します。

#map-holder img {
    max-width: none;
}

どうすればこれを修正できますか？

編集：jsfiddle- http ://jsfiddle.net/bsphere/jYfg3/ 「設定」に移動してから「マップ」に戻り、歪んだマップを確認します

4

1 に答える 1

2

これはEmberに正確に関連しているのではなく、マップの再描画とサイズ変更に関連しているようです。フィドルを使用して、ブラウザウィンドウのサイズを変更すると、マップが正しく表示されることがわかります。それを見たときthis.$().css({ width: "550px", height: "400px" });、地図が崩れる前に置いてみたところ、うまくいったようです。

于 2012-12-28T09:00:37.803 に答える