html2canvas Google Map - 地图保持移动位置答案

【问题标题】：html2canvas Google Map - Map keeps moving positionhtml2canvas Google Map - 地图保持移动位置
【发布时间】：2014-01-15 20:17:20
【问题描述】：

所以我一直在努力寻找将 Google 地图 (v3 API) 保存为图像的最有效方法。一开始我尝试使用 snapshopcontrol.js，效果很好，但是我有一些地图上有超过 150 个标记，所以超出了 URL 限制。

接下来我用 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+'" />');
        }
    });

如果地图不会移动并保持在正确的位置，那将是完美的。谁能解释为什么会这样？

应用 html2canvas 之前的屏幕截图

应用 html2canvas 后的屏幕截图

更新在我的 JS 控制台中，它说

“XSS 审核员拒绝执行“http://....”中的脚本，因为在请求中找到了它的源代码。审核员已启用，因为服务器未发送“X-XSS-Protection”也不是 'Content-Security-Policy' 标头。”

“跨域资源共享策略拒绝了跨域图像加载。” "data:image/png;base64,iV............"

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题..
@ABHILASHSB 不，我最终没有使用 html2canvas 选项，而是使用 Google Static Maps v2.0 API 创建了一个静态地图图像。
我也遇到了同样的问题...我找不到任何其他地方讨论这个问题，而且显然还没有答案。

标签： javascript google-maps google-maps-api-3 html2canvas

【解决方案1】：

我遇到了同样的问题。似乎 html2canvas 没有将变换样式从父级附加到子级。就我而言，问题是：

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

我所做的只是计算累积翻译并为每个标记添加它。但是，您也应该将其还原

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

【讨论】：

【解决方案2】：

也许您可以更改 de GMPs 版本。在我的情况下，它就像一个魅力。

我尝试使用 3.14 版本但没有任何结果，但是，我只输入了 3.10 的 src URL，它就可以工作了！。

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

【讨论】：

【解决方案3】：

我知道这个主题很老了，但我在使用传单地图时遇到了同样的问题。地图渲染得很好，但标记在 html2canvas 图片上移动了。

我使用 vanvas 而不是 svg 作为标记解决了这个问题：

const mymap = L.map('map', {
        scrollWheelZoom: false,
        preferCanvas: true
    }).setView([47, 2], 6)

如果有帮助的话

【讨论】：