Question

所以我一直在努力寻找将Google Map（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+'" />');
        }
    });

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

应用了BEFORE html2canvas的屏幕截图 Before html2canvas is applied

应用了html2canvas后的屏幕截图 After html2canvas is applied

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

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

“跨源资源共享策略拒绝跨域图像加载”。 “数据：图像/ PNG; BASE64，IV ............”

Answer 1

也许你可以改变de GMps版本。在我的案例中，它就像一个魅力。

我正在使用3.14版本进行操作而没有结果，但相反，我在src URL中只放了3.10而且它刚刚工作！。

并且还将Html2canvas与canvas2image相结合，以改善我的屏幕截图的大小。

Answer 2

我遇到了同样的问题。似乎html2canvas没有将转换样式从父级附加到子级。在我的情况下问题是：

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

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

关于您的Cross Origin问题：地图服务器似乎不允许交叉图像加载。它应该下载图像，你必须在html2canvas选项

设置useCORS：true

Answer 3

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

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

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

如果有帮助

html2canvas谷歌地图 - 地图保持移动位置

3 个答案: