时间戳

首页 > 解决方案 > 谷歌地图：打印地图时如何解决问题？

javascript - 谷歌地图：打印地图时如何解决问题？

问题描述

所以我正在尝试打印谷歌地图地图，我遇到的问题是在尝试放大地图然后打印地图时，地图真的很小，在 Firefox Firefox 图像中几乎看不到

在 Chrome 中，问题在于它打印了太多的空白页面。我只需要第一个，因为地图在第一个，这里有 5 页： Chrome 图像

我的代码是这样的：

function printMap() {
const body = $('body');
const mapContainer = $('#map');
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();

const patchedStyle = $('<style media="print">')
    .text(`
    img {max-width: none !important}
  a[href]:after { content: ""; }
  @page{
    margin: 0 !important;
  }
`)
    .appendTo('head');

window.print();

body.prepend(content);
mapContainerParent.prepend(mapContainer);

printContainer.remove();
patchedStyle.remove();

}

标签： javascriptmaps

解决方案

经过长时间的搜索和尝试，我找到了一种方法来解决为所有浏览器打印全尺寸地图的问题。

function printMap() {
$('<style media="print">')
    .text(`
   body {
    width: ${screen.width}px;
    height: ${screen.height}px;
  }
  body { zoom: 50% !important;}
  @page {margin: 0 !important; size: letter !important}
`)
    .appendTo('head');

window.print();
return false;

}

推荐阅读