因此,我一直在尝试找到将 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 后的屏幕截图
更新 在我的 JS 控制台中,它说
“XSS 审核员拒绝执行“http://....”中的脚本,因为在请求中找到了它的源代码。审核员已启用,因为服务器既未发送“X-XSS-Protection”也未发送“内容” -Security-Policy 标头。”
“跨域资源共享策略拒绝了跨域图像加载。” “数据:图像/png;base64,iV…………”