无法在单击打印按钮时打印谷歌地图

Not able to print Google map on click of print button

本文关键字：打印 按钮 谷歌地图 单击      更新时间：2023-09-26

我无法使用jQuery单击打印按钮打印谷歌地图。我正在使用谷歌地图API的第3版。地图在页面上正确呈现，但是当我单击打印按钮时，它不会打印地图的任何内容。代码如下： 

printLinks.init = function () {

$('body').on('click', '.js-print-link', function (e) { 

var prWin = window.open('', '_blank', 'resizable=yes,scrollbars=yes,status,width=600,height=700');
prWin.document.write('<HTML><HEAD><LINK href=/css/print.css ' + ' type="text/css" rel="stylesheet"><title>Print Window</title>');
prWin.document.write('<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js""></script>');
prWin.document.write('<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initializeMaps"></script>');
var prCon = document.getElementById('body').innerHTML;
var str1 = $.parseHTML(prCon);
$('<div/>').append(htmlstring).find('#abc').append('<a id="prClick" href="#" class="share-print" onClick="window.print()" style="float:right"></a>');
var str2 = $('<div/>').append(str1);
prWin.document.write(str2.html());
prWin.document.close();
prWin.focus();
e.preventDefault();
});
};

为了进一步解释上面的代码，单击页面底部的按钮时，将打开一个名为"打印窗口"的新窗口，大小为600 * 700，其中包含原始窗口的内容，但具有不同的css名为print.css此处引用。原始窗口也包含谷歌地图。在新的"打印窗口"上，地图也正确显示，但是当我单击"打印窗口"右上角的打印图标时，地图根本没有打印。请指教。

var printMaps = function () {
        var body               = $('body'),
            mapContainer       = $('#YourMapContainer'),
            mapContainerParent = mapContainer.parent(),
            printContainer     = $('<div>');
        body.prepend(printContainer);
        printContainer
            .addClass('print-container')
            .css('position', 'relative')
            .height(mapContainer.height())
            .append(mapContainer);
        var content = body.children()
            .not('script')
            .not(printContainer)
            .detach();
        window.print();
        body.prepend(content);
        mapContainerParent.prepend(mapContainer);
        printContainer.remove();
    };
    $('#PrintButton').on('click', printMaps);
相关文章：