复制 Google 映射 DIV 到新的 window 进行打印

Question

这是我的情况。我有一个使用 google 地图 API 创建的地图，带有样式和 FusionTable 叠加层。用户可以放大到任何位置，当 he/she 单击任何多边形时，会弹出一个包含联系信息的信息窗口。然后用户将按下 'Print' 按钮，该按钮应在新的 window 上打开地图并启动打印对话框。现在，这是我的两部分问题。

如何将 google 地图实例（使用多边形和信息 window 放大）复制到新的 window。
如何在渲染地图后触发打印命令。

现在，这是我迄今为止尝试的背景和结果。

已将地图复制到新 window，但打印命令的行为很有趣，因为它超出了 'div' 参数并破坏了地图。
尝试了 html2canvas 方法，但它只有在您按住 SHIFT 并单击打印按钮时才能正常工作。

对于奖励标记：打印时我想按比例调整地图大小以适合页面大小（它当前正在裁剪地图的一部分）。

Answer 1

终于设法解决了这个问题，因此我发布了我的解决方案，以帮助可能需要相同功能的任何人。并且还开辟了任何改进的可能性。重点是瞄准地图div.

的"innerHTML"

这是我的函数，将由页面上的 "Print" 按钮触发：

$('.map-print').on('click',
    function printMap() {
    var mapwindow = window.open('', 'PRINT');
    mapwindow.document.write('<!DOCTYPE html><html><head><title>' + document.title + ' Agent Finder Map</title><link rel="stylesheet" type="text/css" media="print" href="https://www.liteline.com/styles/print.css" />');
    mapwindow.document.write('<style>@media print { #map-canvas div > img { position: absolute; } }</style>'); //important in order to force the print render not to break apart causing a grayed-out band
    mapwindow.document.write('</head><body>');
    mapwindow.document.write('<div id="map-canvas" style="position:relative;width:1000px;height:670px;overflow:hidden !important">');
    mapwindow.document.write(document.getElementById("map-canvas").innerHTML);
    mapwindow.document.write('</div>');
    mapwindow.document.write('</body></html>');
    mapwindow.document.close();
    mapwindow.focus();
    mapwindow.print();
    mapwindow.close();
    return false;
});

我知道它并不完全完美，但它完成了工作。希望这个解决方案可以帮助某人。

复制 Google 映射 DIV 到新的 window 进行打印

Duplicate Google Maps DIV to new window for printing

javascript

google-maps

google-maps-api-3

google-maps-markers

new-window