javascript - 将当前的 Google map 另存为图片

Question

如何将当前的谷歌地图保存为图像？下面是我用来初始化 map 的 Javascript。

var myMarker = new google.maps.LatLng(result[0].centerLat, result[0].centerLong);
var myOptions = {
  disableDoubleClickZoom: true,
  zoom: result[0].zoom,
  center: myMarker,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

我看过https://developers.google.com/maps/documentation/javascript/reference#Map但似乎没有返回当前 map 对象的 URL 或图像的方法。是否可以通过某种方式将 map 另存为图像？

Answer 1

如果您想保存的内容超出 google maps 静态 API 允许的范围(例如在其上绘制的自定义叠加层太复杂/太大而无法通过查询字符串)，您可以使用 html2Canvas ( http://html2canvas.hertzen.com/ ) 之类的东西将 map 容器导出到 Canvas ，然后将其转换为数据 URL 并根据需要进行处理。

function saveMapToDataUrl() {

    var element = $("#mapDiv");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            // DO SOMETHING WITH THE DATAURL
            // Eg. write it to the page
            document.write('<img src="' + dataUrl + '"/>');
        }
    });
}

我认为您需要将 useCORS 选项设置为 true 才能允许该函数从 google 下载图像。

这种方法的缺点是它可能会在您的页面上留下大约 1 兆字节的数据。

我曾尝试使用这种方法将 map 导出为要下载的图像，但遇到了如何将此图像提供给漂亮庄园中的人的问题。您可以使用将其 href 属性设置为您创建的 dataUrl 的超链接，但除非您使用像 download="filename.png"这样的 HTML 属性，否则无法设置文件名，这对我来说在不同的浏览器上一直存在问题。另一种方法是将 dataUrl 发布到服务器，然后服务器根据需要发送，但是上传大图像只是为了再次下载它似乎是一种奇怪的处理方式。