Question

使用html2canvas捕获Google地图时出现问题。

当我选择一个地点时，谷歌地图会显示一个包含有关该地点信息的信息窗口，但是当我在打印中捕获地图时，只会显示一个白色矩形。

在此示例中选择任意位置并将地图保存为png时，您会看到此问题

<script>
$(function() { 
    $("#btnSave").click(function() { 
            $("#img-out").children().remove();
        html2canvas($("#map"), {
            useCORS: true,
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
    });
</script>

<style>
#map {
  width:300px;
  height:300px;
}

.elements {
  display:inline-block;
}
</style>

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

此示例在三个月前生效。

有什么主意吗？

预先感谢

Answer 1

我发现了错误，我需要使用html2canvas属性“ use Overflow：false”

html2canvas($("#map"), {
                useCORS: true,
                useOverflow: false,
                onrendered: function(canvas) {
                    theCanvas = canvas;
                    document.body.appendChild(canvas);
                    $("#img-out").append(canvas);
                }
            });

无法使用html2canvas捕获Google地图的“信息窗口”的内容[已解决]

1 个答案: