如何使用媒体打印，谷歌地图

Question

我有一个页面的webbrowser视图，带有Google地图。

然后我添加了一些@Media Print样式

<style type="text/css">
        @media print
        {
        body{font-family:georgia,times,sans-serif;}
        img{max-width:500px;}
        #headerblock{display:none;}
        #navigationblock{display:none;}
        #thewaydiv{display:block;}
        #footerblock{display:none;}
        #contentmap{min-height:100px; position:relative; width:100%;}
        #map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;}
        }
    </style>

当我然后使用打印页面或打印视图时，我得到了这个：

正如您所看到的那样，Google地图的页面大小正常，但它太大/只是真实图像的一小部分。我该如何解决这个问题，以便在打印视图中获得类似浏览器视图的Google图像？

Answer 1

使用CSS无法完成此操作。

您需要一个特殊页面，其中的地图大小必须打印，或者在打印前缩小地图（这可以使用javascript完成）。

Answer 2

我还遇到了动态数据驱动地图的这个问题。 然而，我确实找到了一种使用css的方法，使得这项工作更加顺畅，而无需使用API​​或笨重的单独地图页来操作地图。

我为地图提供了一个具有已定义高度的容器div，并将其css溢出设置为隐藏。 我在第一个地图下添加了第二个地图，使用相同的设置但是可打印的尺寸，如700px宽，500px高。

最后，打印样式表只有display：none，第一个地图显示其容器中的第二个隐藏地图。

这是hacky吗？ 也许，但它对我来说立即。