我正在寻找一种方法来有效地打印使用谷歌地图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>它充当快照的占位符.