谷歌地圖 API V3 打印地圖
[英]Google Maps API V3 Printing Maps
問題描述
我正在尋找一種方法來有效地打印已在使用谷歌地圖 api v3 的網站上實施的谷歌地圖。
我看到有些人只使用 window.print js 然后
@media print
{
body * { visibility: hidden; }
#map * { visibility: visible; }
#map {visibility: visible;position:absolute; top: 5px; left: 5px;}
}
目前，使用 fancybox 向用戶顯示更大的 map，我為此添加了一個打印按鈕。 理想情況下，我只想添加一些 jquery 或類似的內容來打印 map。
然而，這似乎並沒有真正起作用。 有沒有人對最好的方法有任何建議
6 個解決方案
解決方案1
18 已采納 2015-11-18 15:58:50
我想通過簡單而微妙的 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替換$printContainer任何打印模板。 這里我只使用一個簡單的<div>作為快照的占位符。
這里的工作代碼： http : //jsfiddle.net/glenn/6mx21ted
解決方案2
5 2016-03-19 01:20:14
請注意，如果您還使用 Bootstrap，它會為您中斷地圖打印。 添加此代碼：
@media print {
img {
max-width: auto !important;
}
}
解決方案3
2 2013-04-25 12:12:13
在 HTML 中，#Gmap 是您顯示 google 地圖的 div，一旦點擊 Print Button 就會調用函數 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
}
解決方案4
0 2017-11-15 07:56:04
您可以使用html2canvas.js將地圖 div 轉換為畫布元素，然后您可以將其打印為圖像。 下面的代碼非常適合我：
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
});
}
});
});
解決方案5
0 2020-09-23 10:04:38
如果您想為每個瀏覽器打印完整尺寸的地圖，請嘗試此操作：
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
我沒有足夠的聲譽來發表評論，但請聽我說完。
對於那些對已接受的答案有一些疑問的人，其中 map 的隨機圖塊亂序和/或一些完全變灰（小提琴在最新版本的 Chrome 中為我做這個），您需要添加注入頁面的 CSS 的這個小片段：
#map_canvas div > img {
position: absolute;
}
#map_canvas 是您的 map 的選擇器。我在一個舊的錯誤報告線程上偶然發現了這個答案，它現在正在挽救我的生命： https://issuetracker.google.com/issues/35825130?pli=1
所以這是小提琴的“更正”版本： http://jsfiddle.net/nbLr3jtf/
道具仍然是 go 給@Glenn Mohammad 的原始答案！
Google Maps API v3未顯示折線
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.