3

因此，我一直在尝试找到将 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+'" />');
        }
    });

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

应用 html2canvas 之前的屏幕截图 在应用 html2canvas 之前

应用 html2canvas 后的屏幕截图 应用 html2canvas 后

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

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

“跨域资源共享策略拒绝了跨域图像加载。” “数据：图像/png；base64，iV…………”

4

3 回答 3

2

我遇到了同样的问题。似乎 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-04T15:57:51.830 回答
1

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

我正在尝试使用 3.14 版本但没有结果，但相反，我只输入了 3.10 的 src URL，它就可以工作了！

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

于 2014-07-04T14:36:34.020 回答
0

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

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

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

如果能帮上忙

于 2021-02-12T19:28:39.447 回答