jQuery Google Maps API V3 打印地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13050215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API V3 Printing Maps
提问by Purple Hexagon
I am looking for a method to efficiently print Google maps that have been implemented on a site using the google maps api v3.
我正在寻找一种方法来有效地打印已使用谷歌地图 api v3 在网站上实现的谷歌地图。
I have seen some people using just the window.print js and then
我见过一些人只使用 window.print js 然后
@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.
目前，使用fancybox 向用户显示了更大的地图，我为此添加了一个打印按钮。理想情况下，我只想添加一些 jquery 或类似的东西来打印地图。
However this doesn't seem to really work. Has anyone got any suggestions on the best way to do this
然而，这似乎并没有真正起作用。有没有人对执行此操作的最佳方法有任何建议
回答by Glenn Mohammad
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 $mapContaineris the main container of your maps, related code is:
我想通过简单而微妙的 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();
}
Note that you can flexibly replace $printContainerby any print template. Here I just use a simple <div>that serves as a placeholder of the snapshot.
请注意，您可以灵活地替换$printContainer为任何打印模板。这里我只使用一个简单的<div>作为快照的占位符。
Working code here: http://jsfiddle.net/glenn/6mx21ted
这里的工作代码：http: //jsfiddle.net/glenn/6mx21ted
回答by tempranova
Please note, if you're also using Bootstrap it will break map printing for you. Add this code:
请注意，如果您还使用 Bootstrap，它会为您中断地图打印。添加此代码：
@media print {
img {
max-width: auto !important;
}
}
回答by Jingwen
In HTML, #Gmap is the div you display the google map, and Print Button will call function gmapPrint() once it has been clicked.
在 HTML 中，#Gmap 是您显示 google 地图的 div，一旦点击 Print Button 就会调用函数 gmapPrint()。
<!-- HTML -->
<div id="Gmap"></div>
<div onclick="gmapPrint();">Print Button</div>
In JavaScript, the gmapPrint() function read the map details and write it on a new window. Then print the new window.
在 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
}
回答by Ceyhun
You can use html2canvas.jsto convert map div to canvas element, then you can print it as image. Below code works perfect for me:
您可以使用html2canvas.js将地图 div 转换为画布元素，然后您可以将其打印为图像。下面的代码非常适合我：
HTML
HTML
<div id="map" style="width:500px;height:500px;"></div>
<input type="button" value="Print Map" class="printBtn" />
JavaScript
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
});
}
});
});
