html2canvas谷歌地图 - 地图不断移动的位置

所以我一直在试图找到最有效的方法来保存谷歌地图（V3 API）作为一个图像。起初，我尝试使用snapshopcontrol.js，这很好，但我有一些地图上有超过150个标记，所以超出了URL限制。html2canvas谷歌地图 - 地图不断移动的位置

接下来，我尝试了下面的代码与html2canvas，它创建的地图图像，但只要html2canvas呈现它，地图的位置转移，我的标记现在悬停在看起来是lat 0 lng 0.

var element = $('#mapDiv'); 
html2canvas(element, { 
     useCORS: true, 
     onrendered: function(canvas) { 
      var dataUrl= canvas.toDataURL("image/png"); 
      document.write('<img src="'+dataUrl+'" />'); 
     } 
    });

如果地图不会移位并保持在正确的位置，那将是完美的。任何人都可以解释为什么会发生这种情况？ BEFORE html2canvas的

截屏被应用于 Before html2canvas is applied

后html2canvas的屏幕快照应用 After html2canvas is applied

UPDATE 在我的JS控制台，它说

“的XSS审计拒绝在“http：// ....”中执行一个脚本，因为它的源代码在请求中被发现，审计器被启用，因为服务器既没有发送'X-XSS - 保护“或”内容安全策略“标题。”

“跨源资源共享策略拒绝跨源图像加载”。 “data：image/png; base64，iV ............”

来源

2014-01-15 Phil

您是否找到任何解决方案？我遇到了同样的问题。 –

@ABHILASHSB不，我最终没有使用html2canvas选项，而是使用Google Static Maps v2.0 API创建静态地图图像。 – Phil

我有同样的问题...我找不到任何其他地方讨论这个问题，显然还没有答案。 – bjo

也许你可以更改de GMps版本。它对我来说就像一个魅力。

我用3.14版本进行了测试，结果没有结果，但是我只是在src URL中输入了3.10，它刚刚工作！

此外，我还将Html2canvas与canvas2image结合起来，以改善我的屏幕截图的大小。

来源

2014-07-04 14:36:34 user3381068

我遇到了同样的问题。看起来html2canvas不会将变换样式从父项添加到子项。在我的情况的问题是：

<div class="mapContainerClass" style="transform: translate3d(9px,-5px,0px);" > 
    <div class="markerClass" style="transform: translate3d(89px,-56px,0px);" ></div> 
</div>

我所做的是计算累计翻译和添加它为每个标记。但你应该恢复它以及

关于你的十字起源问题：它似乎地图服务器不允许跨图像加载。它应该下载图像，并且您必须在html2canvas选项中设置useCORS：true

来源

2014-11-04 15:57:51 Voila

html2canvas谷歌地图 - 地图不断移动的位置

回答

相关问题