Не удается захватить содержимое информационного окна Google-карт с помощью html2canvas [решено] - PullRequest
Новая
       9

Не удается захватить содержимое информационного окна Google-карт с помощью html2canvas [решено]

1 голос
/ 02 июля 2019

У меня проблема при захвате карт Google с помощью html2canvas.

Когда я выбираю место, на картах Google отображается информационное окно с информацией об этом месте, но когда я снимаю карту в печати, появляется только белый прямоугольник.

Вы можете увидеть эту проблему, когдаВы выбираете любое место в этом примере и сохраняете карту в png

http://jsfiddle.net/Lindow/60yn2hss/

<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>

Этот пример работал три месяца назад.

Есть идеи?

Заранее спасибо

1 Ответ

0 голосов
/ 02 июля 2019

Я нашел ошибку, мне нужно использовать атрибут html2canvas "use Overflow: false" 

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