Question

背景

我正在编写Google地图网络应用程序（API v3），我希望用户能够打印他们在屏幕上看到的内容。

地图div是100％宽和100％高，各种位和bob叠加，包括标记和应用程序控件等。

我正在使用@print一套css规则删除我不想打印的内容以及所有完美无缺的内容。

问题

我遇到的问题是地图对于页面而言太宽（实际上有点太高）。（在打印设置中将尺寸设置为“缩小至适合”）。

我主要使用Firefox进行开发，但是在Chrome和IE中进行测试并看到同样的事情。

如果我的1920x1080显示器上有全屏浏览器窗口，品脱预览和打印输出仅为屏幕显示的50％左右。

如果我将“打印预览”对话框中的打印尺寸缩小到50％，那么事情看起来是正确的。

如果我将浏览器窗口缩小到大约一半的水平尺寸（并且只是略微垂直），那么事情看起来就是正确的。

因此，问题似乎是依赖于浏览器窗口大小 - 即浏览器窗口显示的地图比可以打印的更多。

基本上我想要实现的是让所有显示的地图打印尽可能高，并且取决于用户的打印机设置 - 如果你愿意，可以选择真正的'Shrink To Fit'。但我似乎无法随心所欲。

'解决方案'我试过

在其他线程中建议的一个解决方案是为打印生成一个合适大小的固定大小的弹出窗口 - 这是我之前在我的API v2应用程序中所做的（我从头开始重写v3 ） - 但这也不起作用。使用弹出窗口我只会显示较小的“视口” - 即与打印的地图大致相同的部分（我想这证实我的窗口大小正确！）。

我正在使用以下内容生成弹出窗口：

var content = window.document.getElementById("map-canvas"); // get you map details
var logoBox = "<div class='logoBox' id='logoBox' style='width:300px;    height:65px; border-radius:4px; background-color:rgba(255,255,255,0.75);    box-shadow:5px 5px 2px rgba(50,50,50,0.5);  float:left; z-index:10; position:absolute;  top:10px;   left:10px; padding:5px;'><img src='myLogo_300x65.png' id='myLogo'></div>";
var printWindow = window.open("","printWindow", "Width=640, Height=620,location=no,menu bar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no"); // open a new window
printWindow.document.write(content.innerHTML); // write the map into the new window
printWindow.document.write(logoBox); 
printWindow.print(); // print the new window

另外还有一个奇怪之处 - 在移动设备上，弹出式地图显示的主屏幕显示与主要调用页面相同，但在桌面上的FireFox上只打开我的一个标记。

观

我认为解决方案可能与以下一项或多项有关：

打印css强制适当的比例适合，或
将可打印元素放置在地图的右下角，以防浏览器看到地图图块不够重要，无法缩放，或者
需要在较大的地图上执行getBounds并在较小的地图上设置getBounds以适当缩放地图。

这里的最后一点，我试图了解这个问题，但我正在努力在主窗口的新弹出窗口中调用fitBounds（）。

到目前为止，我已经：

var displayedMapBounds = new google.maps.LatLngBounds;
displayedMapBounds = map.getBounds(); // map is the Google Maps instance on the main page
// printWindow.map.fitBounds(displayedMapBounds); // This doesn't work for semi-obvious reasons
printWindow.document.map.fitBounds(displayedMapBounds); // This doesn't work for semi-obvious reasons

在dowcument.write语句之后插入上面的代码。

我确信这些半明显的原因对大多数人来说实际上是显而易见的，但有没有办法引用地图对象并从主窗口中操纵它？这样？

任何指针都会感激不尽，因为这是该网站重新启动的显示器。

打印Google地图 - 影响打印尺寸的屏幕尺寸

0 个答案: