Javascript 单击“打印”按钮无法打印谷歌地图_Javascript_Jquery_Google Maps_Google Maps Api 3_Printing

Javascript 单击“打印”按钮无法打印谷歌地图

javascript jquery google-maps google-maps-api-3 printing

Javascript 单击“打印”按钮无法打印谷歌地图,javascript,jquery,google-maps,google-maps-api-3,printing,Javascript,Jquery,Google Maps,Google Maps Api 3,Printing,我无法使用jQuery在点击打印按钮时打印google地图。我使用的是谷歌地图API的第3版。地图在页面上正确呈现，但当我单击“打印”按钮时，它不会打印地图的任何内容。代码如下： printLinks.init = function () { $（'body'）。在（'click'，'js print link'，函数（e）{ var prWin=window.open（“，”空白“，”可调整大小=yes，滚动条=yes，状态，宽度=600，高度=700”）； prWin.document.

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

printLinks.init = function () {

$（'body'）。在（'click'，'js print link'，函数（e）{

var prWin=window.open（“，”空白“，”可调整大小=yes，滚动条=yes，状态，宽度=600，高度=700”）；
prWin.document.write（“打印窗口”）；
prWin.document.write（'var printMaps=function（）{
变量body=$（'body'），
mapContainer=$（“#YourMapContainer”），
mapContainerParent=mapContainer.parent（），
printContainer=$（''）；
正文.前置（打印容器）；
印刷容器
.addClass（“打印容器”）
.css（'位置'，'相对'）
.height（mapContainer.height（））
.append（映射容器）；
var content=body.children（）
.not（'脚本'）
.not（打印容器）
.detach（）；
window.print（）；
正文.前置（内容）；
mapContainerParent.prepend（mapContainer）；
printContainer.remove（）；
};
$（“#打印按钮”）。在（'click'，printmap'）；
我们能看看代码吗，你是如何打印的？嗨，米歇尔，我已经更新了问题以及下面的代码和一些描述。请建议我这里缺少什么。好的，检查我下面的答案。我认为这有助于打印地图。你能详细说明我应该在css类“打印容器”中添加什么吗？我如何集成你的我的代码？还有，我不需要在这里包含任何谷歌地图api吗？打印容器基本上是宽度
和高度。谷歌地图api？当然，我教过你已经在使用了。这不起作用，它仍然提供内容，但地图不会显示。我需要先将动态谷歌地图渲染为图像吗然后打印它？这是一个与地图和打印按钮的小提琴链接：这可能不同于您的地图API，因为这是地图的方向API，但可以给您一个想法。如果单击打印按钮执行操作，您可以再次检查吗？
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();
});
};

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);