在浏览器中打印中心Google地图（V3）

我将地图设置为页面宽度的100％。地图有一个标记，并以该标记为中心。当我打印浏览器时，我希望地图保持以标记为中心。这是我写这样做代码：在浏览器中打印中心Google地图（V3）

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

来源

2012-02-23 Justin McConnell

你需要添加一个@media打印和给地图的大小，当打印，然后你可以做下面解释。

打印地图时会发生什么情况，左上角会保留并且地图会根据@media打印尺寸进行调整。

如果您希望中心保持不变，您需要手动更改地图的中心。 http://jsbin.com/owiwox/33是如何解决此问题的示例。

它使用监听器的平面媒体所套用的事件，并调整地图的使用在地图上是如何变化的比率中心（更小）

您拥有的是照顾一件事你可能不得不做出这个浏览器的目标，使其在所有浏览器（此解决方案以及在Chrome）为使其跨浏览器的工作奠定了良好的资源是： http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

从样品的js代码上面听打印请求并移动地图，以便左上角与大地图具有相同的中心。

为了削减整个故事很短，这是它如何工作的

您需要把地图VS印图的比例（或由JS检查它得到的大小）您指定它可以： var widthRatio = 2; var heightRatio = 3;
你听应用于印刷媒体和转向中央，使得它不会改变
后完成打印，恢复更改。

仍然存在这样的问题，即地图的一部分会被剪切掉，但这里并没有一个好的解决方案，因为缩放级别-1瓷砖可能不会被缓存，所以当您缩小以适合边界你可能得不到瓷砖。

来源

2013-04-18 13:13:41 kaskader

要更清楚地看到它，只需尝试打印：http://gmaps-samples-v3.googlecode.com/svn/trunk/map_language/map_lang.html - 选择一种语言，您将看到2个DIV ，在打印时，它们都被剪裁以适应纸张：保留左上角（作为参考）并保持尺寸，因此右/下部分被移除。 – miguev 2013-04-18 13:30:57

看来问题与你的“打印”或“打印机”。

我做了一个试验：

负载测试图，使浏览器很宽
打印预览，看到你描述
但问题：我可以改变从'Shrint到适合'的打印比例（默认为IE和FF）为30％，并能够按照屏幕上的说明打印地图。

另一个想法是：

您可以尝试使用其他CSS打印限制地图div宽度，但我不知道这将首先触发地图的缩放（可参考这个职位：Javascript Event Handler for Print）

来源

2012-02-24 17:36:34 user1226919

嗨，谢谢你的回答。恐怕我没有成功地尝试使用不同的印刷媒体风格。结果是一样的 - 浏览器缩小包含地图的div元素，但不重新居中。打印时缩小到较小的尺寸将不起作用，因为浏览器也会缩小其他所有内容。我需要使用整个页面。 – 2012-03-13 21:14:10

在浏览器中打印中心Google地图（V3）

回答

相关问题