Я занимаюсь разработкой веб-сайта, который генерирует карты Google с маркерами и полилиниями на основе указанных c параметров поиска. Я хочу функциональность, которая позволяет пользователю экспортировать текущую карту в виде изображения, и все, что указано на html2canvas. Затем я столкнулся с некоторыми проблемами, связанными с тем, что карты Google не очень дружат с html2canvas, и найденный мной обходной путь после некоторого поиска пришел к этому фрагменту кода (разрабатывается в Angular 8):
exportMap() {
html2canvas(this.gmap.nativeElement, {
useCORS: true,
allowTaint: false,
ignoreElements: (node) => {
return node.nodeName === 'IFRAME';
}
}).then(canvas => {
this.canvas.nativeElement.src = canvas.toDataURL();
this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
this.downloadLink.nativeElement.download = 'mapexport.png';
this.downloadLink.nativeElement.click(); }); }
Но это не работает "полностью", карта экспортируется в виде файла изображения, но по какой-то причине его часть вырезается следующим образом:
Когда в действительности полный текущий вид карты таков:
Я понятия не имею, почему это происходит, но все остальное работает правильно (маркеры, полилинии и т. д. c.) Просто карта вырезана.