Google Maps API V3打印地图

Question

我正在寻找一种方法来有效地打印使用谷歌地图api v3在网站上实现的谷歌地图.

我见过一些人只使用window.print js然后

@media print
{
    body * { visibility: hidden; }
    #map * { visibility: visible; }
    #map {visibility: visible;position:absolute; top: 5px; left: 5px;}
}

目前使用fancybox向用户显示更大的地图,我已经为此添加了一个打印按钮.理想情况下,我只想添加一些jquery或类似的东西来打印地图.

然而,这似乎并没有真正起作用.有没有人对最佳方法有任何建议

Answer 1

我想通过简单但微妙的DOM操作,你可以获得你的谷歌地图的"快照"(理论上 - 任何地图:))查看器,并在任何浏览器中完美打印.假设$mapContainer是地图的主要容器,相关代码是:

// printAnyMaps ::
function printAnyMaps() {
  const $body = $('body');
  const $mapContainer = $('.map-container');
  const $mapContainerParent = $mapContainer.parent();
  const $printContainer = $('<div style="position:relative;">');

  $printContainer
    .height($mapContainer.height())
    .append($mapContainer)
    .prependTo($body);

  const $content = $body
    .children()
    .not($printContainer)
    .not('script')
    .detach();

  /**
   * Needed for those who use Bootstrap 3.x, because some of
   * its `@media print` styles ain't play nicely when printing.
   */
  const $patchedStyle = $('<style media="print">')
    .text(`
      img { max-width: none !important; }
      a[href]:after { content: ""; }
    `)
    .appendTo('head');

  window.print();

  $body.prepend($content);
  $mapContainerParent.prepend($mapContainer);

  $printContainer.remove();
  $patchedStyle.remove();
}

请注意,您可以灵活地替换$printContainer任何打印模板.在这里,我只使用一个简单的<div>作为快照的占位符.

这里的工作代码:http://jsfiddle.net/glenn/6mx21ted

Answer 2

请注意,如果您还使用Bootstrap,它将为您打破地图打印.添加此代码:

@media print {
  img {
    max-width: auto !important;
  }
}

查看影响谷歌地图的Twitter Bootstrap CSS.