Ember.js: 谷歌地图视图

Question

我正在尝试为谷歌地图创建一个视图，并根据我找到的一些示例实际上使其工作。

问题在于，仅当页面首次显示时地图才会正确绘制，如果路线更改，然后再次绘制地图，则会显示“扭曲”的效果。

我找到的示例是应用程序的“单个页面”部分。

视图：

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}}将地图显示在div#map-holder中。

我还将以下CSS应用于该div，以“修复”Bootstrap对地图控件的影响：

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

我该如何修复这个问题？ 编辑：jsfiddle - http://jsfiddle.net/bsphere/jYfg3/，进入“设置”然后返回“地图”即可查看扭曲的地图。

- Gal Ben-Haim

---

请提供一个“可工作”的jsfiddle，以便说明问题。 - sly7_7

jsfiddle - http://jsfiddle.net/bsphere/jYfg3/前往“设置”，然后返回“地图”以查看扭曲的地图。 - Gal Ben-Haim

Answer 1

看起来这与Ember不太相关，而是与地图重绘和调整大小有关。通过您的fiddle，如果调整浏览器窗口大小，您可以看到地图正确显示。 当我看到它时，我尝试在地图构建之前放置this.$().css({width："550px"，height："400px"});，并且似乎有效。

- sly7_7