使用wkhtmltopdf生成含ng-maps的PDF时地图偏移问题求助

根据你描述的情况——标记点位置正确但地图本体向右下偏移，缩放越低偏移越明显，且设置.gm-style * {transform: none}会在网页端复现问题——核心原因大概率是wkhtmltopdf的旧webkit内核对Google Maps（ng-maps基于它）依赖的CSS transform属性支持不完善，导致地图容器的定位transform没有被正确解析或应用，而标记点因为采用了独立的定位逻辑（比如绝对定位基于地图容器），所以不受影响。

下面给你几个具体的排查方向和解决方案：

一、优先排查wkhtmltopdf版本兼容性 #

wkhtmltopdf的webkit内核版本远落后于现代浏览器，旧版本（比如0.12.5及更早）对CSS3 transform的支持存在诸多bug，尤其是复杂的嵌套transform计算。

• 升级到wkhtmltopdf 0.12.6及以上版本：这个版本更新了Qt内核，对现代CSS属性的支持有明显提升，很多地图渲染的偏移问题都能通过升级解决。
• 验证内核兼容性：可以找和你的wkhtmltopdf版本匹配的旧Chrome浏览器（比如0.12.6对应Chrome 69左右），在该浏览器中打开网页，如果能复现偏移，就坐实了内核兼容性问题。

二、调整Google Maps的渲染模式 #

ng-maps依赖的Google Maps API默认会用优化的渲染方式（比如将瓦片合并为单个Canvas），这种优化在旧webkit内核下可能导致transform失效。你可以尝试强制关闭优化：
在ng-maps的指令中添加map-options参数，禁用瓦片优化：

<ng-map center="[your-lat, your-lng]" zoom="your-zoom" map-options="{optimized: false}"></ng-map>

禁用优化后，地图会逐个渲染瓦片，虽然性能略有下降，但能避免因合并Canvas导致的transform解析错误。

三、强制补全transform属性 #

既然你发现移除transform会复现问题，那可以通过自定义CSS在PDF生成时强制保留transform属性：

1. 创建一个自定义CSS文件（比如pdf-fix.css），写入以下内容：

@media print {
  .gm-style div, .gm-style span, .gm-style label {
    transform: inherit !important;
    transform-origin: inherit !important;
  }
}

2. 在调用wkhtmltopdf时，通过--user-style-sheet参数加载这个文件（elixir-pdf-generator应该支持传递wkhtmltopdf的参数，比如在配置中添加command_options: ["--user-style-sheet", "/path/to/pdf-fix.css"]）。
   这个CSS会强制地图相关元素继承父级的transform属性，避免wkhtmltopdf丢失关键的定位transform。

四、优化PDF生成的渲染参数 #

即使你排除了JS延迟，也可以尝试调整以下参数确保地图完全渲染：

• 增加JavaScript延迟：设置--javascript-delay 5000（延迟5秒），给地图足够的时间加载瓦片并完成transform计算，尤其是缩放级别低时，瓦片数量更多，加载时间更长。
• 固定视图端口：设置--viewport-size 1920x1080（和你的网页实际尺寸匹配），避免wkhtmltopdf默认视图端口和浏览器差异导致的尺寸计算错误，进而影响transform的偏移量。

五、检查容器盒模型计算 #

虽然你说排除了尺寸问题，但可以再确认：

• 地图容器的position: relative是否正确设置，父容器有没有意外的padding/margin/overflow属性，这些在旧webkit内核下可能被错误计算，导致地图容器偏移。
• 尝试给地图容器添加明确的宽高（比如width: 100%; height: 600px;），避免自适应尺寸在PDF中被错误解析。

内容的提问来源于stack exchange，提问作者blankpage985