Google Maps API V3打印地图
我正在寻找一种方法来有效地打印使用谷歌地图api v3在网站上实现的谷歌地图。
我见过一些人只使用window.print js然后
@media print { body * { visibility: hidden; } #map * { visibility: visible; } #map {visibility: visible;position:absolute; top: 5px; left: 5px;} } 目前使用fancybox向用户显示更大的地图，我已经为此添加了一个打印按钮。 理想情况下，我只想添加一些jquery或类似的东西来打印地图。
然而，这似乎并没有真正起作用。 有没有人对最佳方法有任何建议
我想通过简单但微妙的DOM操作，你可以获得你的谷歌地图的“快照”（理论上 – 任何地图:)）查看器，并在任何浏览器中完美打印。 假设$mapContainer是地图的主要容器，相关代码是：
// printAnyMaps :: function printAnyMaps() { const $body = $('body'); const $mapContainer = $('.map-container'); const $mapContainerParent = $mapContainer.parent(); const $printContainer = $(''); $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 = $('
请注意，您可以通过任何打印模板灵活地替换$printContainer 。 这里我只使用一个简单的
作为快照的占位符。
这里的工作代码： http ： //jsfiddle.net/glenn/6mx21ted
请注意，如果您还使用Bootstrap，它将为您打破地图打印。 添加此代码：
@media print { img { max-width: auto !important; } }
查看影响谷歌地图的Twitter Bootstrap CSS 。
在HTML中，＃Gmap是显示谷歌地图的div，打印按钮一旦点击就会调用函数gmapPrint（）。
Print Button
在JavaScript中，gmapPrint（）函数读取地图详细信息并将其写入新窗口。 然后打印新窗口。
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 }
您可以使用html2canvas.js将map div转换为canvas元素，然后将其打印为图像。 下面的代码对我来说非常适合：
HTML
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 = ''; html2canvas($("#map"), { useCORS: true, onrendered: function (canvas) { windowContent += '' windowContent += 'Print canvas '; windowContent += '' windowContent += ' + ')
'; windowContent += ''; windowContent += ''; 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 }); } }); });