使用图层/标记打印谷歌地图 div答案

【问题标题】：print google maps div with layers/markers使用图层/标记打印谷歌地图 div
【发布时间】：2016-01-02 01:07:18
【问题描述】：

如何打印带有所有图层/标记的 Google 地图？

使用$('#map').html() 并将内容放在新窗口中不起作用。它只显示地图基础层。例如，下面的代码不起作用。

function PrintElem(elem)
{
    Popup($(elem).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
    /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10

    mywindow.print();
    mywindow.close();

    return true;
}

将地图适合横向/纵向进行打印也会很好。

【问题讨论】：

您要打印具有创建地图脚本的data？
使用谷歌静态地图API(developers.google.com/maps/documentation/static-maps)怎么样？
你找到解决办法了吗？

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我最终只是在打印优化的弹出窗口中重新创建了地图。

打开弹出窗口：

mapData = {
    data:someMapData(),
};
window.open('print.html', 'window1', 'height=750,width=1000');

从弹出窗口，访问数据：

var data = window.opener.mapData;

在打印窗口中，我根据打印方向（横向/纵向）调整地图大小。

if(type=='portrait') {
    $('#wrap').css('height','780pt').css('width', '600pt'); 
}
if(type=='landscape') {
    $('#wrap').css('height','660pt').css('width', '900pt'); 
}
if(type=='turnbyturn') {
    $('#wrap').css('height','780pt').css('width', '600pt'); 
}

打印效果很好，而且就我的目的而言，它比尝试从应用程序本身打印效果更好。您可以轻松抓取路线数据、折线、点等，并在地图上重新绘制。

【讨论】：