Html2Canvas 和 google maps api v3.33 折线不会出现在图像中答案

【问题标题】：Html2Canvas and google maps api v3.33 polylines do not appear in imageHtml2Canvas 和 google maps api v3.33 折线不会出现在图像中
【发布时间】：2018-08-17 21:10:57
【问题描述】：

我正在尝试将包含路线（使用折线）的谷歌地图导出到图像，但结果该线没有出现。通过一些 css 转换，它与谷歌地图 api v3.31 配合得很好，但由于这个版本在 8 月之后不再可用，我需要使用 v3.33。在这种情况下，折线会在打印的图像中消失。然而，其他组件确实出现在结果中。

地图是这样的：

但是这样打印：

我可以在以下示例中重现该问题：

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(53.140665, 8.805315),
        mapTypeId: 'roadmap'
    });

    var routeCoordinates = [
        {lat: 52.593534, lng: 7.327996},
        {lat: 52.701129, lng: 7.692394},
        {lat: 52.459662, lng: 8.264844},
        {lat: 52.697619, lng: 8.705006},
        {lat: 52.297608, lng: 9.225077}
    ];
    var routePath = new google.maps.Polyline({
        map: map,
        path: routeCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    //console.log('routePath=' + routePath.getPath().getArray());
    routePath.setMap(map);
}

在 html2canvas 中使用以下选项：

var options = {
    useCORS: true,
    allowTaint: false
};

并应用以下转换：

var mapNodes = '.gm-style>div:first>div:first>div:last>div';
var transformer = $(mapNodes).css('transform');
var comp = transformer.split(',');
var mapLeft = parseFloat(comp[4]);
var mapTop = parseFloat(comp[5]);
$(mapNodes).css({
    'transform': 'none',
    'left': mapLeft,
    'top': mapTop
});

测试（其中包括）：

html2canvas：html2canvas 1.0.0-alpha.12
浏览器和版本：Firefox Quantum 60.0.2（64 位）
操作系统：Win 7
Google maps api：v3.33（v3.32 也有同样的问题）

任何提示可能是什么问题？

谢谢！

【问题讨论】：

标签： google-maps-api-3 html2canvas

【解决方案1】：

我今天一直在经历类似的问题。最后，我使用以下方法使其工作。

       var transform = $(".gstyle>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({ 
            "transform": "none",
            "left": mapleft,
            "top": maptop,
        });

           //In previous versions, mapId was enough,
           //but for 3.33 version I had to append .gm-style>div:first in selector

            html2canvas($(mapId+' .gm-style>div:first')[0], {useCORS: true}).then(function(canvas) {
            var imgSrc= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            console.log(imgSrc); 
            //it now captures polyline as well
            });

【讨论】：

谢谢！这解决了我只显示部分折线的问题

【解决方案2】：

我也在 html2canvas 存储库上回答了这个问题，但这是我发现的：

这不是折线问题。它是高度记录的 css 转换问题的衍生物。问题是您的折线位于地图的一部分，如果没有转换，就会被切断。

此选择器.gm-style>div:first>div:first>div:last>div 用于 Google 地图切片图层。

这个显示多边形和折线的绘图叠加层位于不同的 div 中。如果您使用浏览器的检查器工具，您将在 .gm-style>div:first>div:first 中看到其他 div。一旦找到其他带有转换 css 组件的 div，您就可以开始排查哪个 div 是正确的。

您必须对需要转换的每个 div 进行转换。对于我的项目，绘图层位于'.gm-style>div:first>div:first>div:nth-child(2)>div:first>div。

var transform=$(".gm-style>div:first>div:first>div:last>div").css("transform");
var comp=transform.split(",");
var mapleft=parseFloat(comp[4]);
var maptop=parseFloat(comp[5]);
$(".gm-style>div:first>div:first>div:last>div").css({
  "transform":"none",
  "left":mapleft,
  "top":maptop,
});
$(".gm-style>div:first>div:first>div:nth-child(2)>div:first>div").css({
  "transform":"none",
  "left":mapleft,
  "top":maptop,
});

【讨论】：