javascript - 在浏览器打印上居中 Google map (V3)

Question

我将 map 设置为页面宽度的 100%。 map 有一个标记，并以该标记为中心。当我打印浏览器时，我希望 map 保持在标记的中心。这是我为此编写的代码:

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());
});

这在我调整浏览器大小时有效，但在打印前浏览器自行调整大小时不起作用。如果我的浏览器超过一定宽度，则在打印 map 时标记将完全移出页面(向右)。

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

Answer 1

您需要添加一个 @media 打印并在打印时指定 map 的大小，然后您可以执行下面说明的操作。

打印 map 时，会保留左上角并调整 map 以适应 @media 打印尺寸。

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

它为正在应用的打印媒体事件使用一个监听器，并使用 map 更改(变小)的比率调整 map 的中心

你必须注意的一件事是你可能必须使这个浏览器有针对性地让它在所有浏览器上工作(这个解决方案在 Chrome 中运行良好) 使其跨浏览器工作的一个很好的资源是: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

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

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

1. 您需要输入 map 与打印 map 的比例(或者通过从 JS 中检查它来获取尺寸) 您将其分配给: var 宽度比率 = 2; var heightRatio = 3;

2. 您监听正在应用的打印媒体并移动中心以使其不变

3. 完成打印后，您恢复更改。

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