Question

所以即时使用此功能打印我的Google Maps API V3：

function printit(){
var content = window.document.getElementById("map-canvas");
var newWindow = window.open(); // open a new window
newWindow.document.write(content.innerHTML); // write the map into the new window
newWindow.print(); // print the new window
};

这是我使用的HTML按钮：

<button onClick="printit()">Print</button>

问题是使用CSS将map-canvas设置为100％宽度，因此只打印地图左侧是可见的（尽管它适合A4纸）。我试着加上这个：

document.getElementById("map-canvas").style.width = "900px";

但是我收到了一个错误。你能帮我解决这个问题吗？

Answer 1

Google Maps API通常使用ID map_canvas作为高度和宽度属性，而不是map-canvas。所以它必须是：

document.getElementById("map_canvas").style.width = "900px";

Answer 2

尝试

google.maps.event.trigger(map, 'resize');

Answer 3

我找到了解决方案，它并不像我想象的那么简单，这里是完整的工作代码，它在Chrome，Firefox，Opera中进行了测试，它运行良好：

<script type="application/javascript">
function printit(){
  var newWidth = 700,
    content = document.getElementsByClassName("gm-style")[0],
    translateX = (content.clientWidth - newWidth) / 2,
    orgTranslate = content.firstChild.firstChild.style.transform,
    left = content.firstChild.firstChild.style.left;

  var win = window.open();
  win.document.write(content.outerHTML);
  var c = win.document.getElementsByClassName("gm-style")[0];
  c.style.width = newWidth + "px";

    if (orgTranslate) {
    orgTranslate = orgTranslate.split(",");
    orgTranslate[4]-= translateX;
    c.firstChild.firstChild.style.transform = orgTranslate.join(",");
  } else {
    c.firstChild.firstChild.style.left = (parseInt(left, 10) - translateX) + "px"; // firefox uses absolute positioning
  }

  win.print();
};

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});
</script>

还有打印按钮：

<button onClick="printit()">Print</button>

希望这会对某人有所帮助。

打印时调整Google地图的大小

3 个答案: