Javascript 打印时调整Google地图的大小

因此，我正在使用此功能打印我的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>

---

但是我犯了一个错误。你能帮我一下吗？

谷歌地图API通常使用ID

map\u canvas

作为高度和宽度属性，而不是

map canvas

。因此，它必须是：

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

---

Google Maps API通常使用ID

map\u canvas

作为高度和宽度属性，而不是

map canvas

。因此，它必须是：

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

试一试

试一试

---

我找到了解决方案，它并不像我想象的那么简单，下面是完整的工作代码，它在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>

函数printit（）{
var newWidth=700，
content=document.getElementsByClassName（“gm样式”）[0]，
translateX=（content.clientWidth-newWidth）/2，
orgTranslate=content.firstChild.firstChild.style.transform，
左=content.firstChild.firstChild.style.left；
var win=window.open（）；
win.document.write（content.outerHTML）；
var c=win.document.getElementsByClassName（“gm样式”）[0]；
c、 style.width=newWidth+“px”；
如果（orgTranslate）{
orgTranslate=orgTranslate.split（“，”）；
orgTranslate[4]=translateX；
c、 firstChild.firstChild.style.transform=orgTranslate.join（“，”）；
}否则{
c、 firstChild.firstChild.style.left=（parseInt（left，10）-translateX）+“px”；//firefox使用绝对定位
}
win.print（）；
};
var中心；
函数calculateCenter（）{
center=map.getCenter（）；
}
google.maps.event.addDomListener（映射'idle'，函数（）{
计算中心（）；
});
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
地图设置中心（中心）；
});

还有打印按钮：

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

打印

---

希望这能对其他人有所帮助。

我找到了解决方案，它并不像我想象的那么简单，下面是完整的工作代码，它在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>

函数printit（）{
var newWidth=700，
content=document.getElementsByClassName（“gm样式”）[0]，
translateX=（content.clientWidth-newWidth）/2，
orgTranslate=content.firstChild.firstChild.style.transform，
左=content.firstChild.firstChild.style.left；
var win=window.open（）；
win.document.write（content.outerHTML）；
var c=win.document.getElementsByClassName（“gm样式”）[0]；
c、 style.width=newWidth+“px”；
如果（orgTranslate）{
orgTranslate=orgTranslate.split（“，”）；
orgTranslate[4]=translateX；
c、 firstChild.firstChild.style.transform=orgTranslate.join（“，”）；
}否则{
c、 firstChild.firstChild.style.left=（parseInt（left，10）-translateX）+“px”；//firefox使用绝对定位
}
win.print（）；
};
var中心；
函数calculateCenter（）{
center=map.getCenter（）；
}
google.maps.event.addDomListener（映射'idle'，函数（）{
计算中心（）；
});
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
地图设置中心（中心）；
});

还有打印按钮：

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

打印

---

希望这能帮助到别人。

你犯了什么错误？你能提供一把小提琴吗？@NoamHacker其文字是：未定义。这是彩色的，你犯了什么错误？你能提供一把小提琴吗？@NoamHacker写着：未定义。这是ChromeThx中的答案。请您编辑您的答案，以便我确切地知道我必须将这行代码放在函数printit（）中的什么位置？当然，没问题。我把它添加到我的答案中。当我使用这个代码时，发生了一些奇怪的事情。它仍然不打印地图的中部，它打印左侧，但在我关闭了chrome的打印窗口后，我网站上的地图的宽度发生了变化。如果你有时间，你可以在这里查看：似乎工作得很好。我看不出你在说什么问题。你可以发布一个屏幕截图来澄清，或者进一步解释它吗？你发布的这个页面是可以的，但是我想用这个简单的scrypt来打印所有其他页面。从我发布的链接中查看主页，在左侧的地图下方，我放置了带有Your代码的小按钮。文友用它只在地图的左侧打印，不在中间。举个例子，我把意大利放在地图的中间，点击“打印”按钮，我得到的答案是：谢谢。请您编辑您的答案，以便我确切地知道我必须将这行代码放在函数printit（）中的什么位置？当然，没问题。我把它添加到我的答案中。当我使用这个代码时，发生了一些奇怪的事情。它仍然不打印地图的中部，它打印左侧，但在我关闭了chrome的打印窗口后，我网站上的地图的宽度发生了变化。如果你有时间，你可以在这里查看：似乎工作得很好。我看不出你在说什么问题。你可以发布一个屏幕截图来澄清，或者进一步解释它吗？你发布的这个页面是可以的，但是我想用这个简单的scrypt来打印所有其他页面。从我发布的链接中查看主页，在左侧的地图下方，我放置了带有Your代码的小按钮。文友用它只在地图的左侧打印，不在中间。下面是一个例子，我把意大利放在地图的中间，然后点击打印，我得到这个：