3

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

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

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

看法：

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/ 转到“设置”，然后返回“地图”查看扭曲的地图

4

1 回答 1

2

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

于 2012-12-28T09:00:37.803 回答