html2canvas и Google Maps создают карту разреза - PullRequest
0 голосов
/ 09 апреля 2020

Я занимаюсь разработкой веб-сайта, который генерирует карты 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(); }); }

Но это не работает "полностью", карта экспортируется в виде файла изображения, но по какой-то причине его часть вырезается следующим образом: cut map

Когда в действительности полный текущий вид карты таков:
enter image description here

Я понятия не имею, почему это происходит, но все остальное работает правильно (маркеры, полилинии и т. д. c.) Просто карта вырезана.

...