Question

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

我见过一些人只使用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操作，你可以获得＆＃34;快照＆＃34;您的谷歌地图（理论上 - 任何地图:)）查看器，并在任何浏览器中完美打印。假设DECLARE @MaxValue nvarchar(64) DECLARE @NewValue nvarchar(64) DECLARE @CurValue int SELECT @MaxValue = MAX(IDNumber) FROM ClientTable SELECT @CurValue = CONVERT (SUBSTRING(@MaxValue, 2, LEN(@MaxValue) - 3), int) SELECT @NewValue = 'ID' + CONVERT(nvarchar(61), @CurValue) + 'A'是地图的主要容器，相关代码为：

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

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

Answer 2

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

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

请参阅Twitter Bootstrap CSS affecting Google Maps。

Answer 3

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

Answer 4

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

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

Answer 5

如果要为每个浏览器打印完整的地图尺寸，请尝试以下操作：

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;

}

Google Maps API V3打印地图

5 个答案: