将当前的Google地图另存为图片

Question

如何将当前的Google地图另存为图片？下面是我用来初始化地图的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,但似乎没有方法可以返回当前地图对象的网址或图片.是否可以以某种方式将地图另存为图像？

Answer 1

如果你想保存比谷歌地图更多的静态API允许(比如绘制到它上面的自定义叠加太复杂/大而不能通过查询字符串),你可以使用像html2Canvas(http:// html2canvas)这样的地图容器导出到画布.hertzen.com /),然后将其转换为数据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才能允许该功能从谷歌下载图像.

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

我已经尝试使用这种方法将地图导出到要下载的图像,但是在如何将这个图像传递给一个漂亮的庄园中的人时遇到了问题.您可以使用将href属性设置为您创建的dataUrl的超链接,但除非您使用类似download ="filename.png"的HTML属性,否则无法设置文件名,这对我来说在不同的浏览器中存在问题.另一种方法是将dataUrl发布到服务器的服务器,然后按照需要进行调出,但只上传一个大图像再次下载它似乎是一种奇怪的方法来处理它.

Answer 2

您可以使用google地图静态API:https://developers.google.com/maps/documentation/staticmaps/

您可以从google maps javascript api获取需要传递给静态地图api(例如中心,可见区域等)的参数.

Answer 3

您可以使用两种方式：html2canvas用于生成图像或 Google 静态地图 API。

谷歌静态地图 API

function mapeado(geocoder, map, infowindow) {
    var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticMapUrl += "?center=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Set the Google Map Size.
    staticMapUrl += "&size=640x480&scale=2";

    //Set the Google Map Type.
    staticMapUrl += "&maptype=hybrid";

    //Set the Google Map Zoom.
    staticMapUrl += "&zoom=" + mapOptions.zoom;

    //Loop and add Markers.
    staticMapUrl += "&markers=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Display the Image of Google Map.
    var imgMap = document.getElementById("imgMap");

    $("#imgMap").attr("src", staticMapUrl);
    return imgMap + "png";
}

html2canvas

function convertasbinaryimage() {
    html2canvas(document.getElementById("map"), {
        useCORS: true,
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            img = img.replace('data:image/png;base64,', '');
            var finalImageSrc = 'data:image/png;base64,' + img;
            $('#googlemapbinary').attr('src', finalImageSrc);
         }
    });
}

Answer 4

function Export() 
{          

 var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap"; 

        //Set the Google Map Center.        
        staticMapUrl += "?center=" + mapOptions.center.G + "," +     mapOptions.center.K;

        //Set the Google Map Size.
        staticMapUrl += "&size=500x400"; 
        //Set the Google Map Zoom.
        //staticMapUrl += "&zoom=" + mapOptions.zoom;
         staticMapUrl += "&zoom= 19";
          staticMapUrl += "&style=visibility:on";         

          for(var n in polygons)
          {        
           staticMapUrl += "&path=color:0x0x23537C%7Cfillcolor:0x0x23537C|weight:0|"+polygons[n];
          }         

        //Set the Google Map Type.
        staticMapUrl += "&maptype=" + mapOptions.mapTypeId;
        staticMapUrl += "&markers=icon:"+iconpath+"%7c"+latitude+","+longitude;
        staticMapUrl += "&scale= 1";

        for (var j in markers) { 
           if (markers[j]!=='')
           {          
            var image=imagnameewithpath+".png";     
            staticMapUrl += "&markers=icon:"+image+"%7c"+markers[j]+"|";

           }           

      var canvas=document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.crossOrigin = "crossOrigin";  // This enables CORS  
      imageObj.onload = function() {
       canvas.width=imageObj.width;
       canvas.height=imageObj.height;
        context.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
        var dataurl=canvas.toDataURL('image/png');
         var imgMap = document.getElementById("imgMap");
        imgMap.src = dataurl;        
      };
      imageObj.src = staticMapUrl;

    }