谷歌地圖可以使用但沒有任何地圖顯示？

Question

我已將 Google 地圖嵌入到我的應用程序中。 與地圖互動。 響應地圖事件有效（地圖zoom_changed 、標記dragend等）。 但是，只有地圖的某些部分是可見的（例如標記和 Google 徽標），而地圖本身則不可見（至少在 95% 的情況下它們不會出現）。

誰能告訴我這里發生了什么？

編輯：我將其用作 KnockoutJS 組件（與<gui-map></gui-map>一起插入）。 源代碼如下。 我不相信 KnockoutJS 的使用與地圖問題有任何關系，因為：a) 所有的 observable 都正確連接並且 100% 的時間工作； b) 地圖在 5% 的情況下會隨機工作而沒有任何代碼更改。

define(['knockout', 'underscore'], function(ko, _){

    function Map(params, componentInfo) {
        var self = this;

        var defaultPosition = {lat:-25,lng:-130};
        var width = ko.isObservable(params.width) ? params.width : ko.observable(params.width ? params.width : '100px');
        var height = ko.isObservable(params.height) ? params.height : ko.observable(params.height ? params.height : '100px');
        var center = ko.isObservable(params.center) ? params.center : ko.observable(params.center ? params.center : defaultPosition);
        var zoom = ko.isObservable(params.zoom) ? params.zoom : ko.observable(params.zoom ? params.zoom : 12);
        var marker = ko.isObservable(params.marker) ? params.marker : ko.observable(params.marker ? params.marker : defaultPosition);

        var element = componentInfo.element;
        element.style.display = 'block';
        element.style.width = width();
        element.style.height = height();

        width.subscribe(function(){
            element.style.width = width();
        });

        height.subscribe(function(){
            element.style.height = height();
        });

        function onObservableCenterChanged(newValue){
            onObservableCenterChanged.changing = 1;
            console.log('updating center map');
            map.setCenter(newValue);
            setTimeout(function(){
                onObservableCenterChanged.changing = 0;
            }, 500);
        }
        center.subscribe(onObservableCenterChanged);

        function onObservableZoomChanged(newValue){
            onObservableZoomChanged.changing = 1;
            console.log('updating map zoom');
            map.setZoom(newValue);
            setTimeout(function(){
                onObservableZoomChanged.changing = 0;
            }, 500);
        }
        zoom.subscribe(onObservableZoomChanged);

        var map = new google.maps.Map(element, {
            center: center(),
            zoom: zoom()
        });

        var mapMarker = new google.maps.Marker({
            position:center(),
            map:map,
            title:'',
            draggable:true
        });

        map.addListener('center_changed', (function(){
            var mapCenterChangeTimeout;

            return function(){
                if (mapCenterChangeTimeout) {
                    clearTimeout(mapCenterChangeTimeout);
                }

                mapCenterChangeTimeout = setTimeout(function(){
                    if (!onObservableCenterChanged.changing) {
                        var newCenter = map.getCenter();

                        console.log('updating center observble');

                        center({
                            lat:newCenter.lat(),
                            lng:newCenter.lng()
                        });
                    }
                }, 500);
            };
        })());

        map.addListener('zoom_changed', (function(){
            var mapZoomChangedTimeout;

            return function(){
                if (mapZoomChangedTimeout) {
                    clearTimeout(mapZoomChangedTimeout);
                }

                mapZoomChangedTimeout = setTimeout(function(){
                    if (!onObservableZoomChanged.changing) {
                        console.log('updating zoom observable');
                        zoom(map.getZoom());
                    }
                }, 500);
            };
        })());

        mapMarker.addListener('dragend', function(){
            var newPosition = mapMarker.getPosition();
            marker({
                lat:newPosition.lat(),
                lng:newPosition.lng()
            });
        });
    }

    ko.components.register('gui-map', {
        template:{
            require:'text!components/gui/map.html'
        },
        viewModel:{
            createViewModel:function(params, componentInfo){
                return new Map(params, componentInfo);
            }
        }
    });

});

EDIT2 ：通過將Map函數的整個主體（ var self = this;賦值除外）包裝在一個使用setTimeout()調用的匿名函數中（延遲 5000 毫秒），我已經成功地使上述內容起作用。 但是，無論如何，所有代碼都在DOMContentLoaded事件之后執行，所以我不確定為什么會出現這個問題。

Answer 1

問題的原因是，如果包含地圖的元素不可見，則 Google Maps Javascript API 無法正確呈現地圖。 在我的情況下，地圖位於隱藏選項卡中。 上面提到的超時解決了這個問題，因為延遲給了我足夠長的時間來在調用 Google Maps API 的函數可以執行之前切換選項卡（如果我延遲打開選項卡直到調用 Google Maps API 之后，問題將重新 -表面）。

我通過在地圖上手動觸發調整大小並手動更新地圖上的各種控件來解決此問題，例如：

google.maps.event.trigger(map, 'resize');
infoWindow.setContent(infoWindowElement);
infoWindow.close();
infoWindow.open(map, marker);

我希望這個解決方案可以幫助別人。