Question

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

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

现在，这是我到目前为止尝试的结果和结果。

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

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

Answer 1

最后成功解决了这个问题，因此我发布了我的解决方案，以帮助任何可能需要相同功能的人。并且还要开拓任何改进的可能性。主要的目标是定位地图div的“innerHTML”。

这是我的功能，将由页面上的“打印”按钮触发：

$('.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 Maps DIV复制到新窗口进行打印

1 个答案: