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/detecting-print-requests-with-javascript/

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

简而言之，这就是它的运作方式

您需要输入地图与打印地图的比例（或通过从JS查看来获取尺寸）您将其分配给： var widthRatio = 2; var heightRatio = 3;
您正在侦听正在应用的打印介质并转移中心以使其不会发生变化
完成打印后，您还原更改。

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

Answer 2

您的“打印”或“打印机”似乎存在问题。

我做了一个测试：

加载测试地图并使浏览器非常宽
打印预览并看到您描述的问题
但是：我可以将打印比例从“Shrint to fit”（IE和FF的默认值）更改为30％，并且能够打印屏幕上显示的地图。

另一个想法是：

您可以尝试使用其他CSS进行打印以限制地图div宽度，但我不确定是否会首先触发地图的大小调整（您可以参考这篇文章：Javascript Event Handler for Print）

在浏览器打印中居中谷歌地图（V3）

2 个答案: