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

Question

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

我希望允许用户点击按钮并下载当前查看的地图的图像，因为他们在任何缩放或移动后都会看到它，包括标记：

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

在最后一小时寻找如何做到这一点之后，我提出的绝对没有任何用处。

甚至可以在用户看到它时捕获div吗？或者是创建一个静态谷歌地图并保存图像是唯一的方法吗？

解

我最后和PhantomJS一起去了。我创建了一个Map视图，它通过查询字符串获取输入并使用该数据将标记添加到地图中。然后我使用PhantomJS从地图视图中截取屏幕截图。然后我将截屏图像输出为Base64字符串。

Answer 1

在这种情况下谷歌会建议使用SnapshotControl。限制是SnapshotControl仅支持最多2048个字符的URL。因此，如果在地图上绘制的图层不多，则可以使用它。 对于幻像js，当用户点击下载时，地图上绘制的图层数据应该发送到服务器（通过说downloadServlet）。此数据将传递给可以渲染地图和绘图点的JSP。 Phantomjs将由downloadServlet执行，传递此jsp的URL。

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

Answer 2

您最好的解决方案是静态Google地图。

有很多例子，请参阅https://developers.google.com/maps/documentation/static-maps/intro。

在你的div中创建一个图像，然后我建议使用连接来从你的marker / LatLng / Polyline等变量生成动态网址。然后使用JS将图像的src设置为等于该URL。

之后，有很多JS库允许用户下载图像。