4

グーグルマップAPIv3を使用してサイトに実装されたグーグルマップを効率的に印刷する方法を探しています。

window.printjsだけを使用している人を見たことがあります。

@media print
{
    body * { visibility: hidden; }
    #map * { visibility: visible; }
    #map {visibility: visible;position:absolute; top: 5px; left: 5px;}
}

現在、fancyboxを使用しているユーザーにはより大きな地図が表示されており、これに印刷ボタンを追加しました。理想的には、マップを印刷するためにjqueryなどを追加したいだけです。

ただし、これは実際には機能していないようです。誰かがこれを行うための最良の方法について何か提案がありますか

4

5 に答える 5

5

Bootstrap も使用している場合は、マップの印刷が中断されることに注意してください。次のコードを追加します。

@media print {
  img {
    max-width: auto !important;
  }
}

Google マップに影響を与える Twitter Bootstrap CSS を参照してください。

于 2016-03-19T01:20:14.997 に答える
1

すべてのブラウザで地図をフルサイズで印刷したい場合は、これを試してください:

function printMap() {
$('<style media="print">')
    .text(`
   body {
    width: ${screen.width}px;
    height: ${screen.height}px;
  }
  body { zoom: 50% !important;}
`)
    .appendTo('head');

window.print();
return false;

}

于 2020-09-23T10:04:38.093 に答える