wkhtmltopdf 谷歌地图问题

Question

我需要从一个包含嵌入地图的网页中创建PDF。我使用wkhtmltopdf，elixir-pdf-generator作为我的封装器，前端使用ng-maps。

PDF本身很好用，但是地图部分却不行。在页面上，标记与页面的正确位置相对应，但是地图本身似乎会向右下方移动到原始中心的位置。这种现象会随着缩放的程度而增加。注意：这只发生在PDF上，在网页上可以正常工作。

这不是js延迟问题或调整大小问题。坐标传递到后端时是正确的。渲染PDF时，地图似乎总是偏移相同的方式。

希望有人遇到过这个问题，或者指导我找出问题所在。

编辑：我注意到设置.gm-style * {transform-none}会在HTML中复制此问题。似乎在生成PDF时丢失了一些变换CSS。

- blankpage985

---

至少偏移总是相同的 - 您的缩放比例始终相同吗？我能想到的唯一解决方案有点愚蠢 - 就是在打印前调整坐标，然后在读取后重新调整。 - dmgig

谢谢。不幸的是，有成千上万个标记，它们都基于地址。我必须确切地知道要调整多少才能使每个标记正确。我在谷歌上找到的最接近的东西是这个 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1820。然而，固定宽度并不能解决我的问题。 - blankpage985

啊，我明白了。这是一个棘手的问题。最后一个想法——使用类似HTML转换为PNG的工具——将地图div转换为PNG格式，用它替换PDF创建，等到完成后再将地图div还原回来。当然，这些都是权宜之计。无论如何，祝你好运！ - dmgig

显然，你正在使用的一部分是称为wkhtmltoimage的东西 - 假设它不显示相同的问题。 - dmgig

仍未克服这个问题。我注意到的一件事是设置 .gm-style * {transform-none} 会在 HTML 中复制该问题。似乎在生成 PDF 时某些转换 CSS 丢失了。 - blankpage985

那很有趣。你尝试过在该元素上进行翻译变换吗？或者只是最顶层的Google创建的父div（可能是.gm-style的直接子元素）？https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate 你可能需要尝试一下，但这肯定比我的坐标建议容易。虽然效果相同。 - dmgig

Answer 1

我的建议是使用Google Maps静态API。虽然有些用户已经成功使用了它们

--javascript-delay 3000

这对我的情况没有用。我最终使用的是Google Maps静态API - 它生成一个不需要JS的静态地图。更多信息请参见此处

https://www.api2pdf.com/render-google-map-to-pdf-with-headless-chrome/

- roylewilliam