Google Maps API V3打印地图 [英] Google Maps API V3 Printing Maps

问题描述

我正在寻找一种方法来高效地打印谷歌地图，这些谷歌地图已经在使用谷歌地图api v3的网站上实施。

I am looking for a method to efficiently print Google maps that have been implemented on a site using the google maps api v3.

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

I have seen some people using just the window.print js and then

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

目前使用fancybox和我已经为此添加了打印按钮。理想情况下，我只是想添加一些jquery或类似的打印地图。

Currently a larger map is displayed to users using fancybox and I have added a print button to this. Ideally I just want to add some jquery or similar to print the map.

然而，这似乎并没有真正的工作。有没有人有任何建议，最好的办法做到这一点

However this doesn't seem to really work. Has anyone got any suggestions on the best way to do this

推荐答案

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

I guess by simple yet subtle DOM manipulation, you can get the "snapshot" of your Google Maps (well, theoretically - any maps :)) viewer and perfectly print it in any browsers. Assuming $mapContainer is the main container of your maps, related code is:

// 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> 作为快照的占位符。

Note that you can flexibly replace $printContainer by any print template. Here I just use a simple <div> that serves as a placeholder of the snapshot.

： http://jsfiddle.net/glenn/6mx21ted

这篇关于Google Maps API V3打印地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！