html2canvas ，google地图截屏不完整问题

html2canvas用来进行google地图截屏生成图片一共有两个问题。

第一个问题是跨域问题，解决办法：useCORS: true。

第二个问题是图片生成不完整。完整的地图是由很多图片碎片组成的。截屏的时候总会少了最右边和最下边的图片碎片。

原因是html2canvas，不支持transform。需要将transform转成left和top。

解决办法如下。

function generatePicture() {
        var transform=$(".gm-style>div:first>div:first>div:last>div").css("transform");
        var comp=transform.split(","); //split up the transform matrix
        var mapleft=parseFloat(comp[4]) ;//get left value
        var maptop=parseFloat(comp[5]);  //get top value
        $(".gm-style>div:first>div:first>div:last>div").css({ //get the map container. not sure if stable
          "transform":"none",
          "left":mapleft,
          "top":maptop,
        });
        html2canvas($(".gm-style"), {
            useCORS: true,
            scale: 3,
            onrendered: function(canvas) {
                var url = canvas.toDataURL();
                $('.js-Base64Img').attr('src', url);
                $(".gm-style>div:first>div:first>div:last>div").css({
                  left:0,
                  top:0,
                  "transform":transform
                });
            },
        });
}

其中由于地图版本的不同。

选择器$(".gm-style>div:first>div:first>div:last>div")。有可能会有不同。

可以先找到class='gm-style'的div.然后去其后代元素中找。包含很多地图残片，并且带有transform的那个div就是了。如下图。