Question

有一些关于谷歌地图api正确居中问题的帖子。我理解以下内容调整了地图的大小：

google.maps.event.trigger(map, 'resize');

我能够在首页显示的div元素中正确显示地图。但是，当导航回保存地图的html页面时，div中只显示一小部分地图。我遇到的问题是弄清楚如何合并这个调整大小的触发器。我是SPA和Durandal的新手，这是我负责该地图的viewmodel：

define(['async!https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'], function () {
    var vm = {
        title: 'Home View',
        attached: initialize,
        activate: function () {
            toastr.success('Map View Activated');
        }

    }; 
    return vm;

    function initialize() {
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
});

Answer 1

当然，当地图可见时，你想要这样做，即它有高度和宽度。对此最好的事件通常是组合完成事件。所以：

var vm = {
    title: 'Home View',
    attached: initialize,
    activate: function () {
        toastr.success('Map View Activated');
    },
    compositionComplete: function() {
        google.maps.event.trigger(map, 'resize');
    }
};

请在此处查看所有回调的列表和说明：Hooking Lifecycle Callbacks

Durandal SPA谷歌地图API地图中心

1 个答案: