打印时,Google地图画布变空白(Ctrl + P)

Question

我正在尝试打印位于引导程序面板内的Google地图画布,如下所示:

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

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

一些图片:

在页面

在打印盒

Answer 1

通过有选择地删除@media printBootstrap CSS各部分中的各种行,我发现当我删除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-sassgem 查看BS代码.等效的Less或vanilla CSS应该很容易实现.

非常依然在研究它是否真的是一个修复和/或如果这个变化有附带损害......可能想要将其与div包含你的地图或其他东西隔离开来.

编辑:看起来这一行实际上来自HTML5Boilerplate项目中的代码,该项目包含在Bootstrap中.我创建了一个最小的演示页面,并在H5BP项目上打开了一个关于此的问题.

2016年7月21日更新:此修复程序将包含在BS 4中.