2

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

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

截图（底图在灯箱内）：

在此处输入图像描述

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();
4

1 回答 1

1

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

但是灯箱还不可见，这让 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();andlightbox.get('view').create().append();调用移到了内部openBox()，但仅在第一次调用此函数时才调用它们。

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

这是工作代码的更新小提琴。

于 2013-03-15T07:14:40.933 回答