打印时谷歌地图画布变得空白（Ctrl + P）

Question

我正在尝试打印引导面板内的谷歌地图画布，如下所示：

<div class="panel panel-default">
    <div class="panel-body">
        <div id="map">...</div>
    </div>
</div>

我正在尝试以一种简单的方式打印，只需按CTRL + P。但是在打印可视化框中，地图是空白的。会发生什么？

一些图片：

在页面

在打印框

Answer 1

通过有选择地从 Bootstrap CSS 的 @media print 部分中删除各种行，我发现当我删除 img {max-width...} 行时我的地图又回来了：

@media print { //...there's other stuff above here img { max-width: 100% !important; } //...there's other stuff below here }

您还可以通过在您已导入引导程序的下方添加以下内容来覆盖此效果（而不是从 BS 代码中删除）：

@media print { img { max-width: none !important; } }

请注意，我在上面的代码示例中使用的是 Sass；我在 Rails 项目中，所以我正在通过 bootstrap-sass gem 查看 BS 代码。等效的 Less 或 vanilla CSS 应该很容易实现。

仍在努力解决这个问题，看看它是否真的是一个修复和/或这个变化是否有附带损害......可能想把它隔离到包含你的地图或其他东西的div。

编辑：看起来这一行实际上来自 HTML5Boilerplate 项目的代码，该项目包含在 Bootstrap 中。我在 H5BP 项目中创建了一个最小的演示页面和 opened an issue 。

2016 年 7 月 21 日更新：解决此问题的方法是 slated for inclusion with BS 4。

Answer 2

画布的宽度太大。我设置了一个限制，它起作用了。