[英]Resize Google Maps when printing
So im using this function to print my Google Maps API V3: 因此,即时通讯使用此功能来打印我的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
};
And this is the HTML button that im using: 这是即时通讯使用的HTML按钮:
<button onClick="printit()">Print</button>
The problem is that map-canvas is set to 100% width with CSS, so wen the map is printed only left side is visible (as much as it fits on A4 paper). 问题在于使用CSS将地图画布设置为100%的宽度,因此仅在左侧可见的情况下打印地图(与在A4纸上的尺寸一样大)。 I tryed adding this:
我尝试添加以下内容:
document.getElementById("map-canvas").style.width = "900px";
But i get an error. 但是我得到一个错误。 Can you help me with this?
你能帮我吗?
The Google Maps API normally uses the ID map_canvas
for the height and width properties instead of map-canvas
. Google Maps API通常将ID
map_canvas
用作height和width属性,而不是map-canvas
。 So it has to be: 因此必须是:
document.getElementById("map_canvas").style.width = "900px";
尝试
google.maps.event.trigger(map, 'resize');
I found the solution, it was not as simple as i thought it would be, here is the complete working code, it was tested in Chrome, Firefox, Opera and it works perfectly: 我找到了解决方案,它没有我想象的那么简单,下面是完整的工作代码,它已经在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>
And also the print button: 还有打印按钮:
<button onClick="printit()">Print</button>
Hope this will help someone. 希望这会帮助某人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.