我正在寻找一种高效打印使用 Google Maps 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操作，您可以获取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 替换为任何打印模板。 在这里，我只使用一个简单的 @media print {
img {
max-width: auto !important;
}
}
<!-- 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
}
如果您想在任何浏览器上打印地图的全尺寸，请尝试以下方法：
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;
}
<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
});
}
});
});
我没有足够的声望来发布评论，但请听我说。
对于那些在接受的答案中遇到一些问题的人，其中地图上有随机的瓷砖顺序和/或一些完全变灰（在最新版本的Chrome中，这个小提琴正在为我执行此操作），您需要将此小片段添加到注入页面的CSS中：
#map_canvas div > img {
position: absolute;
}
其中 #map_canvas 是你地图的选择器。我在一个旧的错误报告线程上偶然发现了这个答案，现在它正在拯救我的生命：https://issuetracker.google.com/issues/35825130?pli=1
所以这是一个“修正”版本的示例代码：http://jsfiddle.net/nbLr3jtf/
感谢 @Glenn Mohammad 的原始答案！