google-maps-api-3 - Ember.js:Google map View

Question

我正在尝试为 Google map 创建一个 View ，并且实际上根据我找到的一些示例使其能够工作。

问题是 map 仅在第一次显示页面时正确绘制，如果路线发生变化，然后再次绘制 map ，它看起来会“扭曲”。

我发现的示例是应用程序的“一页”部分。

查看:

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')
    })
});

我在“位置”模板中的 div#map-holder 内使用 {{view view.MapView}} 显示 map 。

我还将这个 CSS 应用于 div 以“修复”Bootstrap 与 map 控件的困惑:

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

我该如何解决这个问题？

编辑:jsfiddle - http://jsfiddle.net/bsphere/jYfg3/转到“设置”，然后返回“ map ”查看扭曲的 map

Answer 1

看来这与Ember并不完全相关，而是与 map 重绘和调整大小有关。使用 fiddle ，如果调整浏览器窗口的大小，您可以看到 map 正确显示。当我看到它时，我尝试将 this.$().css({ width: "550px", height: "400px"}); 放在 map 构建之前，看起来去工作。