jquery - Google Maps API V3 打印 map

Question

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

我看到有些人只使用 window.print js，然后

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

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

但是这似乎并没有真正起作用。有没有人对执行此操作的最佳方法有任何建议

Answer 1

我想通过简单而微妙的 DOM 操作，您可以获得 Google map (理论上 - 任何 map :))查看器的“快照”，并在任何浏览器中完美地打印它。假设$mapContainer是 map 的主要容器，相关代码为:

// 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