在浏览器打印中居中谷歌地图(V3)

Question

我有一个地图设置为页面宽度的100%.地图有一个标记,并以该标记为中心.当我打印浏览器时,我希望地图保持在标记的中心.这是我写的代码:

var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
  lastPos = map.getCenter();
  console.log(lastPos.toString());
});      

google.maps.event.addDomListener(window, "resize", function() {
  google.maps.event.trigger(map, "resize"); 
  map.setCenter(lastPos);
  console.log("Re-center on " + lastPos.toString());
});

这在我重新调整浏览器大小时有效,但在浏览器在打印前重新调整自身大小时不起作用.如果我的浏览器高于某个宽度,则在打印地图时,标记将完全从页面(右侧)移开.

这是我的测试用例:http://www-sf.talispoint.com/testmapprint.html

Answer 1

您需要添加@media打印件并在打印时为地图指定尺寸,然后您可以执行以下说明.

打印地图时,会发生左上角,并调整地图以适合@media打印尺寸.

如果您希望中心保持不变,则需要手动更改地图的中心. http://jsbin.com/owiwox/33 是一个如何解决这个问题的例子.

它使用侦听器来处理应用事件的打印介质,并使用地图更改方式(缩小)的比率调整地图的中心

您需要注意的一件事是,您可能必须使这个浏览器成为目标,使其适用于所有浏览器(此解决方案在Chrome中运行良好)使其适用于跨浏览器的良好资源是: http:// tjvantoll的.com/2012/06/15 /检测-打印请求与-的JavaScript /

上面示例中的js代码侦听打印请求并移动地图,使左上角与大地图具有相同的中心.

简而言之,这就是它的工作原理

1. 您需要输入地图与打印地图的比例(或通过从JS检查来获取大小)您将其分配给:var widthRatio = 2; var heightRatio = 3;

2. 您正在侦听正在应用的打印介质并将中心移动以使其不会发生变化

3. 完成打印后,您还原更改.

仍然在这里你有一个地图的一部分将被剪切的问题,但这里没有一个很好的解决方案,因为缩放级别-1平铺可能不会被缓存,因此当你缩小以适应边界时,你可能没有得到任何平铺.