我正在寻找一种方法来有效地打印使用谷歌地图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 = $('<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.在这里,我只使用一个简单的< div>它充当快照的占位符.
