6

我有这个网页浏览器视图，带有谷歌地图。

浏览器视图

然后我添加了一些@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 图像？

4

2 回答 2

2

这不能使用 CSS 完成。

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

于 2012-09-03T19:03:31.163 回答
1

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

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

最后，打印样式表简单地显示：第一个地图显示其容器中的第二个隐藏地图：无。

这是哈克吗？
也许吧，但它立即对我有用。

于 2014-04-30T02:06:51.230 回答