html2canvas不适用于Google Maps Pan

我正在使用html2canvas将我的在线地图保存为图像（请参阅另存为图像链接）。 我已经在Firefox，Chrome和Opera上试过了。

如果您不更改默认地图，它往往更经常地工作。 如果您缩放，然后平移地图，它是不太可能工作。 地图将平移，但html2canvas将使用旧的中心点和地图边界。 而html2canvas将无法加载新地图边界的地图图块。

地图平铺正确，但html2canvas使用旧的中心点和地图边界。 为什么是这样？

为了支持从不同领域获取图像，我有以下设置：

useCors: true; 

我已经尝试了以下解决scheme

– 手动更改地图types。 有时候这会修复它。

– 触发浏览器resize事件 – 没用。

– 使用setTimeout（）等待2000毫秒，以确保瓷砖加载 – 没有用

– 使用代理（html2canvas_proxy_php.php） – 没用

– 使用谷歌地图空闲事件来等待地图空闲之前保存 – 没有用

Answer 1

显然，这个问题似乎源于html2canvas不能够呈现CSS变换，至less在铬（我只能在OSX上重现铬的问题）。 容纳瓷砖的容器使用-webkit-transform翻译。 所以我们可以做的是获取容器被移动的值，移除变换，从我们transform的值中分配left和top ，然后使用html2canvas 。 然后地图不会中断，当html2canvas完成时，我们重置地图的css值。

所以我把它粘贴到你的网站的JavaScript控制台，似乎工作

 //get transform value var transform=$(".gm-style>div:first>div").css("transform") var comp=transform.split(",") //split up the transform matrix var mapleft=parseFloat(comp[4]) //get left value var maptop=parseFloat(comp[5]) //get top value $(".gm-style>div:first>div").css({ //get the map container. not sure if stable "transform":"none", "left":mapleft, "top":maptop, }) html2canvas($('#map-canvas'), { useCORS: true, onrendered: function(canvas) { var dataUrl= canvas.toDataURL('image/png'); location.href=dataUrl //for testing I never get window.open to work $(".gm-style>div:first>div").css({ left:0, top:0, "transform":transform }) } });