4

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

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

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

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

然而，这似乎并没有真正起作用。有没有人对最好的方法有任何建议

4

5 回答 5

18

我想通过简单而微妙的 DOM 操作，您可以获得 Google 地图（好吧，理论上 - 任何地图 :)）查看器的“快照”，并在任何浏览器中完美打印。假设$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

于 2015-11-18T15:58:50.837 回答
5

请注意，如果您还使用 Bootstrap，它将为您中断地图打印。添加此代码：

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

请参阅影响 Google 地图的 Twitter Bootstrap CSS。

于 2016-03-19T01:20:14.997 回答
2

在 HTML 中，#Gmap 是您显示谷歌地图的 div，打印按钮一旦被点击就会调用函数 gmapPrint()。

<!-- HTML -->
<div id="Gmap"></div> 
<div onclick="gmapPrint();">Print Button</div>

在 JavaScript 中，gmapPrint() 函数读取地图详细信息并将其写入新窗口。然后打印新窗口。

<!-- JS Script -->
function gmapPrint() {
    var content = window.document.getElementById("Gmap"); // get you map details
    var newWindow = window.open(); // open a new window
    newWindow.document.write(content.innerHTML); // write the map into the new window
    newWindow.print(); // print the new window
}
于 2013-04-25T12:12:13.997 回答
1

如果您想为每个浏览器打印完整大小的地图，请尝试以下操作：

function printMap() {
$('<style media="print">')
    .text(`
   body {
    width: ${screen.width}px;
    height: ${screen.height}px;
  }
  body { zoom: 50% !important;}
`)
    .appendTo('head');

window.print();
return false;

}

于 2020-09-23T10:04:38.093 回答
0

您可以使用html2canvas.js将地图 div 转换为画布元素，然后您可以将其打印为图像。下面的代码非常适合我：

HTML

<div id="map" style="width:500px;height:500px;"></div>
<input type="button" value="Print Map" class="printBtn" />

JavaScript

var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: defLocation,
            mapTypeId: 'satellite',
            streetViewControl: false
        });      
$(document).on('click', '.printBtn', function () {
            map.setOptions({
                mapTypeControl: false,
                zoomControl: false,
                streetViewControl: false,
                panControl: false
            });
            var printWin = window.open('', '', 'width=1000,height=700');
            var windowContent = '<!DOCTYPE html>';

            html2canvas($("#map"), {
                useCORS: true,
                onrendered: function (canvas) {
                    windowContent += '<html>'
                    windowContent += '<head><title>Print canvas</title></head>';
                    windowContent += '<body>'
                    windowContent += '<img src="' + canvas.toDataURL() + '">';
                    windowContent += '</body>';
                    windowContent += '</html>';
                    printWin.document.open();
                    printWin.document.write(windowContent);
                    printWin.document.close();
                    printWin.focus();
                    setTimeout(function () { printWin.print(); printWin.close(); }, 500);

                    map.setOptions({
                        mapTypeControl: true,
                        zoomControl: true,
                        streetViewControl: true,
                        panControl: true
                    });
                }
            });
        });
于 2017-11-15T07:56:04.980 回答