为什么打印网页时 Google Map API V3 画布不打印？答案

【问题标题】：Why won't Google Map API V3 canvas print when I print a webpage?为什么打印网页时 Google Map API V3 画布不打印？
【发布时间】：2013-01-14 22:29:15
【问题描述】：

提前感谢您提供的任何帮助！我创建了一个似乎运行良好的地图工具；我得到了一张地图、一条可拖动的路线、多个航路点和一个完整的动态方向面板。我希望用户能够打印此网页并获取 map_canvas 和 Directions_panel。在测试中，打印预览曾经包含 map_canvas，但在此过程中，当我打印网页时，map_canvas 停止出现。如何在打印时显示它？

这是我的 HTML。

<div id="map-route-page">
<div id="map_canvas"></div>
<div class="clear"></div>
<div class="map-buttons">
<input type="submit" id="showform" value="Edit Map">
<a href="javascript:if(window.print)window.print()"><input type="submit" id="printpage" value="Print this Page"></a>
</div>
<div class="clear"></div>
<div id="directions_panel"></div>
</div>

更新：乱用 CSS，我发现如果我删除“position:relative”和“-webkit-transform: translateZ(0);”，地图就会变成可打印的。来自#map_canvas。不幸的是，这使得整个打印页面看起来很奇怪（地图太大而且位置不正确。）我应该添加另一个标签或 CSS 来解决这个问题吗？

【问题讨论】：

标签： google-maps google-maps-api-3 webkit webkit-transform

【解决方案1】：

呸！经过大量的反复试验，我找到了解决方案。虽然我在 main.css 文件中指定了 #map_canvas 的宽度和高度，但我没有在 print.css 文件中指定这些属性。我没有编辑 position:relative 或 -webkit-transform 属性以使其适合我。

【讨论】：