Question

我正在使用Ember.js来实现一个包含Google Map的灯箱。问题在于，当地图位于灯箱中时，它会向上移动并向左移动到我预期的位置。底部和右侧的左侧空间只是一个空白区域，您无法拖动地图。当我在主页面中渲染相同的地图视图时，没有问题。我还注意到，如果我打开开发人员工具（在Chrome和Firefox中），地图就会变得正确。我不知道为什么会这样。

这是JSFiddle：http://jsfiddle.net/hekevintran/qt5k4/9/。

屏幕截图（底部地图位于灯箱中）：

enter image description here

HTML：

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
{{view App.MapView}}    
</script>

<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;">
    {{view App.MapView}}
</div>
</script>

JavaScript的：

App = Ember.Application.create({});

App.MapView = Ember.View.extend({
    installMap: function () {
        var mapOptions = {
            // San Francisco
            center: new google.maps.LatLng(37.773429,-122.424774),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        new google.maps.Map(this.$()[0], mapOptions);
    },
    didInsertElement: function () {
        this.$().css(
            {'height': '350px',
             'width': '350px'}
        );
        this.installMap();
    }
});

Lightbox = Ember.Object.extend({
    isVisible: false,
    open: function () {
        this.set('isVisible', true);
    },
    close: function () {
        this.set('isVisible', false);
    },
    view: function () {
        var controller = this;
        return Ember.View.extend({
            templateName: 'lightbox',
            controller: controller,
            isVisibleBinding: 'controller.isVisible'
        })
    }.property()
});

lightbox = Lightbox.create();

Ember.View.create({
    templateName: 'buttons',
    controller: Ember.Object.create({
        openBox: function () {
            lightbox.open();
        },
        closeBox: function () {
            lightbox.close();
        }
    })
}).append();

lightbox.get('view').create().append();

Answer 1

问题是您在首次加载页面时在灯箱中创建地图。当您在JavaScript页面末尾调用lightbox.get('view').create().append();时会发生这种情况。

但灯箱尚未显示，这会混淆Maps API。您可以通过在打开灯箱后在地图上触发resize事件来解决此问题，但最好避免在您需要之前创建地图和灯箱视图。

这解决了问题，作为奖励，您的页面加载速度更快，因为您无法在加载时创建第二个地图。

为此，我用以下代码替换了代码的最后一部分：

var lightbox;

Ember.View.create({
    templateName: 'buttons',
    controller: Ember.Object.create({
        openBox: function () {
            if( ! lightbox ) {
                lightbox = Lightbox.create();
                lightbox.get('view').create().append();
            }
            lightbox.open();
        },
        closeBox: function () {
            if( lightbox ) {
                lightbox.close();
            }
        }
    })
}).append();

正如您所看到的，我在lightbox = Lightbox.create();内移动了lightbox.get('view').create().append();和openBox()个调用，但只是在第一次调用此函数时调用它们。

我还在closeBox()中添加了一个警卫，因此如果尚未创建，则不会尝试关闭不存在的灯箱。

以下是包含工作代码的updated fiddle。

放入灯箱时，Google地图会以偏移量呈现

1 个答案: