谷歌地图 API V3 打印地图
[英]Google Maps API V3 Printing Maps
问题描述
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.目前，使用 fancybox 向用户显示更大的 map，我为此添加了一个打印按钮。 Ideally I just want to add some jquery or similar to print the map.理想情况下，我只想添加一些 jquery 或类似的内容来打印 map。
However this doesn't seem to really work.然而，这似乎并没有真正起作用。 Has anyone got any suggestions on the best way to do this有没有人对最好的方法有任何建议
6 个解决方案
解决方案1
18 已采纳 2015-11-18 15:58:50
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.我想通过简单而微妙的 DOM 操作，您可以获得 Google 地图（理论上 - 任何地图 :)）查看器的“快照”，并在任何浏览器中完美打印。 Assuming $mapContainer is the main container of your maps, related code is:假设$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 $printContainer by any print template.请注意，您可以灵活地将$printContainer替换$printContainer任何打印模板。 Here I just use a simple <div> that serves as a placeholder of the snapshot.这里我只使用一个简单的<div>作为快照的占位符。
Working code here: http://jsfiddle.net/glenn/6mx21ted这里的工作代码： http : //jsfiddle.net/glenn/6mx21ted
解决方案2
5 2016-03-19 01:20:14
Please note, if you're also using Bootstrap it will break map printing for you.请注意，如果您还使用 Bootstrap，它会为您中断地图打印。 Add this code:添加此代码：
@media print {
img {
max-width: auto !important;
}
}
See Twitter Bootstrap CSS affecting Google Maps .请参阅影响 Google 地图的 Twitter Bootstrap CSS 。
解决方案3
2 2013-04-25 12:12:13
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.在 JavaScript 中，gmapPrint() 函数读取地图详细信息并将其写入新窗口。 Then print the new window.然后打印新窗口。
<!-- 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
}
解决方案4
0 2017-11-15 07:56:04
You can use html2canvas.js to convert map div to canvas element, then you can print it as image.您可以使用html2canvas.js将地图 div 转换为画布元素，然后您可以将其打印为图像。 Below code works perfect for me:下面的代码非常适合我：
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
});
}
});
});
解决方案5
0 2020-09-23 10:04:38
Try this if you want to print the full size of the map for every browser:如果您想为每个浏览器打印完整尺寸的地图，请尝试此操作：
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;
} }
解决方案6
0 2022-03-28 19:58:04
I do not have enough reputation to post comments, but hear me out.我没有足够的声誉来发表评论，但请听我说完。
For those of you who are having some issues with the accepted answer, where the map has random tiles out of order and/or some entirely grayed out (the fiddle is doing this for me in the latest version of Chrome), you need to add this little snippet to the CSS that is being injected into the page:对于那些对已接受的答案有一些疑问的人，其中 map 的随机图块乱序和/或一些完全变灰（小提琴在最新版本的 Chrome 中为我做这个），您需要添加注入页面的 CSS 的这个小片段：
#map_canvas div > img {
position: absolute;
}
where #map_canvas is the selector of your map. I stumbled upon this answer on an old bug report thread and it is saving my life right now: https://issuetracker.google.com/issues/35825130?pli=1 #map_canvas 是您的 map 的选择器。我在一个旧的错误报告线程上偶然发现了这个答案，它现在正在挽救我的生命： https://issuetracker.google.com/issues/35825130?pli=1
So here is a "corrected" version of the fiddle: http://jsfiddle.net/nbLr3jtf/所以这是小提琴的“更正”版本： http://jsfiddle.net/nbLr3jtf/
Props still go to @Glenn Mohammad for his original answer!道具仍然是 go 给@Glenn Mohammad 的原始答案！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.