javascript - 使用 jQuery 将 Google map 转换为静态图像以供下载

Question

我的网站上有一个 div，我在其中创建了一个 GoogleMap。我添加了标记并实现了 MarkerClusterer。

我想让用户点击一个按钮并下载当前查看的 map 的图像，就像他们在缩放或移动包括标记后看到的那样:

我尝试使用 html2canvas 但它根本不起作用。

在过去一个小时搜索了如何执行此操作后，我完全没有找到任何有用的东西。

这甚至可以捕获用户看到的 div 吗？还是创建静态谷歌地图并保存图像是执行此操作的唯一方法？

解决方案

我最后选择了 PhantomJS。我创建了一个 map View ，它通过查询字符串获取输入并使用该数据向 map 添加标记。然后我使用 PhantomJS 从 map View 中截取屏幕截图。然后我将屏幕截图图像输出为 Base64 字符串。

Answer 1

Google 在这种情况下建议使用 SnapshotControl。限制是 SnapshotControl 仅支持最多 2048 个字符的 URL。所以在 map 上绘制的图层不多的情况下可以使用。 对于phantom js，当用户点击下载时， map 上绘制的图层数据应该发送到服务器(通过downloadServlet)。此数据将传递给可以呈现 map 和绘图点的 JSP。 Phantomjs 将通过传递此 jsp 的 URL 的 downloadServlet 执行。

我在我的应用程序中使用了 phantomjs，因为我一次绘制大约 4-5 个不同的图层。这里唯一需要注意的是，执行 phantomjs 的服务器需要有互联网连接，否则将无法绘制 map 。