在window.print（）上看不到Google地图内容

Question

我想在用户点击打印按钮时打印谷歌地图。我使用window.print()打印页面。从我做过的一项研究中，大部分示例都是对地图进行快照，只在另一页上打印地图。正如您在我附加的图片中看到的那样，它会将Google徽标显示为图钉而不是地图。我添加了display:block !important但仍未显示正在打印的地图。有谁知道如何打印地图，包括其他细节。

谢谢

Answer 1

因此，您需要在我上面的评论中给出的答案中操作javascript，以便包含其他内容。 这是一个有效的例子。

function printMaps() {
  var body               = $('body');
  var appendMap          = $('#before_map');
  var prependMap         = $('#after_map');
  var mapContainer       = $('.map-container');
  var printContainer     = $('<div>');

  printContainer
    .prepend(appendMap)
    .addClass('print-container')
    .css('position', 'relative')
    .height(mapContainer.height())
    .append(mapContainer)
    .append(prependMap)
    .prependTo(body);


  // Patch for some Bootstrap 3.3.x `@media print` styles. :|
  var patchedStyle = $('<style>')
    .attr('media', 'print')
    .text('img { max-width: none !important; }' +
          'a[href]:after { content: ""; }')
    .appendTo('head');

  window.print();

});

这里完整的小提琴： http://jsfiddle.net/6mx21ted/141/

它基于答案Google Maps API V3 Printing Maps