Google 地图 canvas 在打印时变得空白 (Ctrl + P)
Google Map canvas is getting blank when printing (Ctrl + P)
我正在尝试打印 bootstrap 面板内的 google 地图 canvas，如下所示：
<div class="panel panel-default">
<div class="panel-body">
<div id="map">...</div>
</div>
</div>
我正在尝试以一种简单的方式进行打印，只需按 CTRL + P。但是在打印可视化框中，地图是空白的。可能发生了什么？
部分图片：
第
页
在打印框
canvas 的宽度太大。我设置了一个限制，它起作用了。
通过从 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
}
您还可以通过在导入 bootstrap 下方的某处添加以下内容来覆盖此效果（相对于从 BS 代码中删除）：
@media print {
img {
max-width: none !important;
}
}
请注意，我在上面的代码示例中使用了 Sass；我在一个 Rails 项目中，所以我正在通过 bootstrap-sass gem 查看 BS 代码。等效的 Less 或 vanilla CSS 应该很容易实现。
仍在努力查看它是否真的是一个修复程序 and/or 如果此更改有附带损害...可能希望将其隔离到包含您的地图或其他内容的 div。
编辑：看起来这一行实际上来自 HTML5Boilerplate 项目的代码，该项目包含在 Bootstrap 中。我在 H5BP 项目上创建了一个最小的演示页面和 opened an issue。
2016 年 7 月 21 日更新：此问题的修复是 slated for inclusion with BS 4。
我正在尝试打印 bootstrap 面板内的 google 地图 canvas，如下所示：
<div class="panel panel-default">
<div class="panel-body">
<div id="map">...</div>
</div>
</div>
我正在尝试以一种简单的方式进行打印，只需按 CTRL + P。但是在打印可视化框中，地图是空白的。可能发生了什么？
部分图片：
第
页在打印框
canvas 的宽度太大。我设置了一个限制，它起作用了。
通过从 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
}
您还可以通过在导入 bootstrap 下方的某处添加以下内容来覆盖此效果（相对于从 BS 代码中删除）：
@media print {
img {
max-width: none !important;
}
}
请注意，我在上面的代码示例中使用了 Sass；我在一个 Rails 项目中，所以我正在通过 bootstrap-sass gem 查看 BS 代码。等效的 Less 或 vanilla CSS 应该很容易实现。
仍在努力查看它是否真的是一个修复程序 and/or 如果此更改有附带损害...可能希望将其隔离到包含您的地图或其他内容的 div。
编辑：看起来这一行实际上来自 HTML5Boilerplate 项目的代码，该项目包含在 Bootstrap 中。我在 H5BP 项目上创建了一个最小的演示页面和 opened an issue。
2016 年 7 月 21 日更新：此问题的修复是 slated for inclusion with BS 4。