javascript - window.print()，谷歌映射屏幕截图之间的空白

我目前正在处理aspx页面，主要功能是显示由几个标记（数量巨大）组成的google maps路径，我需要添加打印选项（A3 / A4格式），并且一直在使用window.print（）函数来实现这一目标，因为我一直在尝试其他方法（例如google maps api）时遇到问题，这是我当前的问题：使用window.print（）我能够获得以正确的格式打印地图，但是在打印输出上显示空白，这是示例A4（1050,625）：
screenshot

代码：

function print(width,height){

            var cDiv = document.createElement('div');
            cDiv.setAttribute('id','mainContainer');
            cDiv.innerHTML='<div id="mapContainer"></div>';

            var jqMapContainer = $("#map");

            mapContainer = jqMapContainer[0];

            var origDisplay = [],
            origMapParent = mapContainer.parentNode;
            body = window.document.body;
            childNodes = body.childNodes;

            // hide all body content
            $.each(childNodes, function (i, node) {
                if (node.nodeType === 1) {
                    origDisplay[i] = node.style.display;
                    node.style.display = 'none';
                }
            });

            body.appendChild(cDiv);

            var rc = document.getElementById('mapContainer');

            rc.appendChild(mapContainer);

            $("#mainContainer").width(width);
            $("#mainContainer").height(height);
            $(mapContainer).width(width);
            $(mapContainer).height(height);

            setTimeout(function () {
                window.print();
            }, 4000);

            var _self = this;
            // allow the browser to prepare before reverting
            setTimeout(function () {

                // put the chart back in
                origMapParent.appendChild(mapContainer);

                $("#mainContainer").remove();

                // restore all body content
                $.each(childNodes, function (i, node) {
                    if (node.nodeType === 1) {
                        node.style.display = origDisplay[i];
                    }
                });

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

            }, 4000);
        }

包含地图的div元素：

<div class="CenterRightColMap">
            <div class="contentCC">
                <div id="map" class="mapFullPage"></div>
            </div>
        </div>

样式：

div.mapFullPage
{
    width:100%;
    height:98%;
}
div.contentCC {
    position:relative;
    padding: 5px;
    margin: 5px 5px 0px 5px;
    border: 1px solid #000000;
    /*background: #FFFFFF;
    color: #666666;
    font-family: Tahoma,Verdana,Helvetica,Helvetica-Narrow,sans-serif;*/
    text-align:center;
    height:100%
}
div.CenterRightColMap
{
    position:absolute;
    float: auto;
    left:430px;
    right:20px;
    height:85%;
    min-height:85%;
    FONT-SIZE: 8pt;
    background-color: #CECECE;
    FONT-FAMILY: Verdana;
    padding: 5px
}

最佳答案

在这里找到解决方案：https://bugs.chromium.org/p/chromium/issues/detail?id=426294
设法通过在页面上添加以下样式来修复它

<style>.gm-style div > img {position: absolute;}</style>

似乎是gm的错误

关于javascript - window.print()，谷歌映射屏幕截图之间的空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58852544/