Question

我正在尝试创建Google地图视图，并根据我找到的一些示例实际让它工作。

问题是地图只在第一次显示页面时才能正确绘制，如果路线被改变，然后再次绘制地图，它看起来“扭曲”。

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

查看：

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}}地图。

我还将这个CSS应用于div来“修复”Bootstrap搞乱地图控件：

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

我该如何解决这个问题？

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

Answer 1

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

Ember.js：谷歌地图视图

1 个答案: