javascript - 谷歌地图内容在 window.print() 上不可见

Question

我想在用户点击打印按钮时打印谷歌地图。我正在使用 window.print() 来打印页面。从我所做的一项研究来看，大多数示例都是对 map 进行快照并仅在另一页上打印 map 。正如您在我附上的图片中看到的那样，它显示了 Google Logo 图钉而不是 map 。我添加了 display:block !important 但仍未显示打印的 map 。有谁知道我如何打印包括其他详细信息的 map 。

谢谢

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

});

完整的 fiddle 在这里: http://jsfiddle.net/6mx21ted/141/

它基于答案 Google Maps API V3 Printing Maps