39

如何将当前的谷歌地图保存为图像？下面是我用来初始化地图的 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 或图像的方法。是否可以以某种方式将地图保存为图像？

4

7 回答 7

35

如果您想保存超过 google maps 静态 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 发布到服务器，然后服务器按照需要发送，但是上传大图像只是为了再次下载它似乎是一种奇怪的处理方式。

于 2013-10-16T14:48:58.837 回答
23

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

您可以从 google maps javascript api 获取需要传递给静态地图 api 的参数（例如中心、可见区域等）。

于 2013-04-26T11:22:59.557 回答
6

You can use two ways: using html2canvas to generate an image or Google static maps API.

Google static maps 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);
         }
    });
}
于 2016-01-25T17:20:20.040 回答
5 
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;

    }
于 2016-03-22T07:19:50.503 回答
4

使用 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();
于 2013-04-26T11:55:45.123 回答
1

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

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

像那个 - 这是图像：

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

参考：谷歌地图图片？

于 2013-04-26T11:23:25.753 回答
1

这是直接网址

对于注释

https://maps.googleapis.com/maps/api/staticmap?center=23.03,72.58&zoom=6&size=640x400&path=weight:3|color:blue|enc:aofcFz_bhVJ[n@ZpAp@t@b@uA%60FuAzEoCdJiDpLs@VM@y@s@oBcBkAw@cCoAuBu@eEaAiAa@iAi@w@a@o@g@g@k@e@u@uAaCc@i@w@y@eAo@i@UaBc@kAGo@@]JyKA}EC{G?q@?IGKCeGA{CAyCAyEAwEBaFAkJ?yGEyAIiLAiB?{@BcBJ}@@aBGwBEo@A@j@BjBFTHjEl@fOD%60C?|@RARAJERWPL@FE^S%60AI%60A&key=API_KEY

对于卫星

https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=37.530101,38.600062&zoom=14&size=640x400&key=YOUR_API_KEY

对于样式化地图

http://maps.googleapis.com/maps/api/staticmap?center=Australia&size=640x400&style=element:labels|visibility:off&style=element:geometry.stroke|visibility:off&style=feature:landscape|element:geometry|saturation:-100&style=feature:water|saturation:-100|invert_lightness:true&key=YOUR_API_KEY

您可以通过更改必要的参数来直接使用它，您只需要 API_KEY

于 2015-12-18T12:08:50.203 回答