6

私はグーグルマップでページのこのウェブブラウザビューを持っています。

ブラウザビュー

次に、@MediaPrintスタイルを追加しました

<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

また、動的データ駆動型マップでこの問題に遭遇しました。ただし、APIや不格好な別のマップページを使用してマップを操作しなくても、cssを使用してこの作業を少しスムーズにする方法を見つけました。

マップに定義された高さのコンテナdivを指定し、そのcssオーバーフローを非表示に設定しました。同じ設定を使用して、最初のマップの下に2番目のマップを追加しましたが、幅700px、高さ500pxのような印刷可能なサイズです。

最後に、印刷スタイルシートには、最初のマップにdisplay：noneがあり、コンテナー内の2番目の非表示のマップが表示されます。

これはハッキーですか？
たぶん、でもそれは私にとってはすぐにうまくいきました。

于 2014-04-30T02:06:51.230 に答える