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

【问题标题】：Convert Google Map to static image for download using jQuery使用 jQuery 将 Google 地图转换为静态图像以供下载
【发布时间】：2013-12-06 09:09:06
【问题描述】：

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

我想让用户在任何缩放或移动（包括标记）之后单击按钮并下载当前查看的地图的图像：

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

在过去一小时搜索如何执行此操作后，我想出绝对没有任何用处。

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

解决方案

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

【问题讨论】：

看看code.google.com/p/snapshotcontrol。如果地图上没有很多图层并且没有绘制大量数据，它可能会解决您的问题。其他选项可以使用 phantomjs，但这需要额外的努力。

标签： javascript jquery image google-maps google-maps-api-3

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

请参阅https://developers.google.com/maps/documentation/static-maps/intro 了解大量示例。

在您的 div 中创建一个图像，然后我建议使用连接从您的标记/LatLng/Polyline 等变量生成一个动态 url。然后用JS设置图片的src等于那个url。

随后，有大量的 JS 库可以让用户下载图像。

【讨论】：