google-maps-api-3 - 如何使用 knockout.js 在 gridstack 小部件中添加谷歌地图和其他图表

Question

我正在使用带有 Knockout.js 的 Gridstack。我正在使用http://troolee.github.io/gridstack.js/demo/knockout.html创建 Gridstack 小部件。我在其中一个小部件中添加了谷歌地图。地图出现一个滚动条。另外，我需要有某种标题，因为它处于当前状态。主要问题是地图的尺寸​​是固定的，当我调整小部件的大小时，地图不能自动适合小部件。这是我的完整代码：

ko.components.register('dashboard-grid', {
        viewModel: {
            createViewModel: function (controller, componentInfo) {
                var ViewModel = function (controller, componentInfo) {
                    var grid = null;

                    this.widgets = controller.widgets;
                    this.id = controller.id;

                    this.afterAddWidget = function (items) {
                        if (grid == null) {
                            grid = $(componentInfo.element).find('.grid-stack').gridstack({
                                auto: false,
                                animate: true
                            }).data('gridstack');
                        }

                        var item = _.find(items, function (i) { return i.nodeType == 1 });
                        grid.addWidget(item);
                        ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
                            grid.removeWidget(item);
                        });
                    };
                };

                return new ViewModel(controller, componentInfo);
            }
        },
        template:
            [
                '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
                '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
                '       <div class="grid-stack-item-content" >',
                '           <header style="background-color: green;"> ',
                '               <button data-bind="click: $root.deleteWidget">Delete me</button><br>',
                '               <label><strong data-bind="text: $root.ids"></strong></label>',
                '           </header>',
                '           <div data-bind="attr: {id: $root.ids}">',
                '           </div>',
                '       </div>',
                '   </div>',
                '</div> '
            ].join('')
    });

    $(function () {
        var ids;
        var Controller = function () {
            var self = this;

            this.widgets = ko.observableArray([]);
            this.id = ko.observable("google-map");
            this.ids = "";

            this.addNewWidget = function () {
                this.ids = this.id();   // this.ids is used to give id to div elements
                this.widgets.push({
                    x: 0,
                    y: 0,
                    width:4,
                    height:5,
                    auto_position: true,
                });
                // calling method to draw map
                createWidget(this.ids);
                return false;
            };

            this.deleteWidget = function (item) {
                self.widgets.remove(item);
                return false;
            };
        };

       ko.applyBindings(new Controller());

    });

    function createWidget(id) {

        var dataArray, latitude, longitude, speed;

        // Load the Visualization API and the corechart package.
        try {
            google.charts.load('current', {'packages':['map', 'gauge']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.charts.setOnLoadCallback(drawChart);
        }
        catch ( err ) {
            //console.log(err);
        }

        function drawChart() {

            latitude = Number(12.93213);
            longitude = Number(77.695185);

            var mapOptions = {
                showTooltip: true,
                showInfoWindow: true,
                zoomLevel: 16, // range: 0-21 for "roadmap" map type
                mapType: 'roadmap',
                enableScrollWheel: true,
                draggable: false,
            };

            var coordinates = "Latitude : " + latitude + "\nLongitude : "+ longitude;
            var mapData = google.visualization.arrayToDataTable([
              ['Lat', 'Long', 'Name'],
              [latitude, longitude, coordinates]
            ] );  

            try {
                //var chart = new google.visualization.Gauge(document.getElementById('gauge'));
                var map = new google.visualization.Map(document.getElementById(id));
                map.draw(mapData, mapOptions);
            }

            catch (err) {
                console.log(err);
            }
        }   // drawChart() ends here
    }   // createWidgets() ends here