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，但似乎没有方法可以返回当前地图对象的URL或图像。是否可以以某种方式将地图另存为图像？

Answer 1

如果你想保存比谷歌地图更多的静态API允许（比如绘制到它上面的自定义叠加层太复杂/大而不能通过查询字符串），你可以使用像html2Canvas（{{}这样的东西将地图容器导出到画布上。 3}}），然后将其转换为数据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

使用API：

var currentPosition=map.getCenter();
return "http://maps.google.com/maps/api/staticmap?sensor=false&center=" +
  currentPosition.lat() + "," + currentPosition.lng() +
  "&zoom="+map.getZoom()+"&size=512x512&markers=color:green|label:X|" +
  currentPosition.lat() + ',' + currentPosition.lng();

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;

    }

Answer 5

你可能会发现直接生成图像的静态地图api很有帮助。

https://developers.google.com/maps/documentation/staticmaps/

像那一个 - 这是图像：

并且有一些工具，例如：http://gmaps-utility-library-dev.googlecode.com/svn/tags/snapshotcontrol/1.0/examples/optionsWizard.html

参考：Google Maps image?

Answer 6

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

Google静态地图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);
         }
    });
}

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

6 个答案:

Google静态地图API

html2canvas