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

问题描述

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

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

@media 打印{身体 * { 可见性:隐藏；}#map * { 可见性:可见；}#map {可见性:可见；位置:绝对；顶部:5px；左:5px;}}

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

然而，这似乎并没有真正起作用.有没有人对执行此操作的最佳方法有任何建议

解决方案

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

//printAnyMaps ::函数 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.孩子们().not($printContainer).not('脚本').分离();/*** 使用 Bootstrap 3.x 的用户需要，因为某些* 它的`@media print` 样式在打印时效果不佳.*/const $patchedStyle = $('<style media="print">').text(`img { 最大宽度:无！重要；}a[href]:after { 内容:"";}`).appendTo('head');窗口.打印()；$body.prepend($content);$mapContainerParent.prepend($mapContainer);$printContainer.remove();$patchedStyle.remove();}

请注意，您可以将 $printContainer 灵活地替换为任何打印模板.这里我只使用了一个简单的

作为快照的占位符.

此处的工作代码:http://jsfiddle.net/glenn/6mx21ted

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

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;}
}

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

解决方案

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

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.

Working code here: http://jsfiddle.net/glenn/6mx21ted

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