Google Map的画布在打印（Ctrl + P）时变成了空白。

Question

我想要打印一个位于Bootstrap面板中的Google地图画布，就像下面这样：

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

我试图简单地通过按下“CTRL + P”来打印，但在打印预览框中，地图是空白的。可能发生了什么？

一些图片： 在页面上： 在打印框中：

- João Paulo

Answer 1

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

@media print { // ...这里还有其他东西 img { max-width: 100% !important; } // ...这里还有其他东西 }

您还可以通过在导入bootstrap的位置下方添加以下内容来覆盖其效果（而不是从BS代码中删除）：

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

请注意，上面的代码示例中我正在使用Sass；我在一个Rails项目上，因此我通过bootstrap-sass gem查看BS代码。相当于Less或vanilla CSS应该很容易实现。

仍在努力研究是否真正修复了问题和/或此更改是否具有副作用……可能需要将此隔离到包含您的地图的

或其他位置。

编辑：看起来这行代码实际上来自于取自HTML5Boilerplate项目的代码，该项目包含在Bootstrap中。我已经创建了一个最小化演示页面并提出了H5BP项目的问题。

更新 2016年7月21日：此问题的修复计划将与BS 4一起发布。

- Ryan Dlugosz

---

+1 表示 2-4-1。这也修复了 OS Openspace 地图 API 中相同类型的问题。 - Andrew Murphy

Answer 2

画布的宽度太大了。我设了一个限制，这样就可以使用了。

- João Paulo

---

我看到了同样的问题。想知道是否有一种方法可以根据需要仅减小画布大小以便打印，然后再重新扩展。我怀疑这与Bootstrap有关，因为我在其他网站上甚至可以很好地打印全屏谷歌地图。 - Ryan Dlugosz

我尝试了在打印前后调整大小并触发“resize”事件。对我来说没有用:(当转换地图时，打印预览中也出现了一些白色条纹...缩放可以消除这些条纹... - João Paulo