html2canvas不保存谷歌Map图片

Question

我有一个带有谷歌地图的 angular 应用程序，我想截屏并将这张照片保存在我的电脑上。

不幸的是，我的方法只采用边框，我在这张照片上看不到 map。

怎么了？

我在stackoverflow上找到了这篇文章：

html2canvas 不适用于 Google Maps Pan

但我不知道如何将其转换为 typescript。

这是我的代码：

My.TS 代码：

import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { ClientService } from '../Services/ClientService';
import { Client } from '../Models/Client';
import { last } from 'rxjs/operators';
import { element } from 'protractor';
import { stringify } from '@angular/compiler/src/util';
import { ToastrService } from 'ngx-toastr';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  title = 'WGCM';
  lat = 52.237049;
  lng = 18.517532;
  pointList: { lat: number; lng: number }[] = [];
  drawingManager;
  all_overlays = [];
  selectedShape: any;
  selectedArea = 0;


  @Input() clientList: Array<Client>;
  @Output() klienci : EventEmitter<Client[]> = new EventEmitter<Client[]>();
  clientLocations = [];
  circledClients = [];
  markerDistanceClients : Client[] = [];

  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;


  constructor(private client: ClientService,private toastr: ToastrService){}

  ngOnInit(): void {
    // google.maps.event.addListener(map,'dragend',function () {
    //   this.checkMarkersInBounds(event)
    // });
  }


  onMapReady(map) {
    this.initDrawingManager(map);
  }

  initDrawingManager = (map: any) => {

    const self = this;
    this.drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                // google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.POLYGON,

              ],
            },
            markerOptions: {
              icon:
                "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
            },
            circleOptions: {
              fillColor: "#ffff00",
              fillOpacity: 1,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1,
            },
          }
          );
    this.drawingManager.setMap(map);



    google.maps.event.addListener(
      this.drawingManager,
      'overlaycomplete',
      (event) => {
        if (event.type === google.maps.drawing.OverlayType.POLYGON) {

          const paths = event.overlay.getPaths();
          for (let p = 0; p < paths.getLength(); p++) {
            google.maps.event.addListener(
              paths.getAt(p),
              'set_at',
              () => {
                if (!event.overlay.drag) {
                  self.updatePointList(event.overlay.getPath());
                }
              }
            );
            google.maps.event.addListener(
              paths.getAt(p),
              'insert_at',
              () => {
                self.updatePointList(event.overlay.getPath());
              }
            );

            google.maps.event.addListener(
              paths.getAt(p),
              'remove_at',
              () => {
                self.updatePointList(event.overlay.getPath());
              }
            );
          }
          self.updatePointList(event.overlay.getPath());
          this.selectedShape = event.overlay;
          this.selectedShape.type = event.type;
        }
        if (event.type !== google.maps.drawing.OverlayType.MARKER) {
          // Switch back to non-drawing mode after drawing a shape.
          self.drawingManager.setDrawingMode(null);
          // To hide:
          self.drawingManager.setOptions({
            drawingControl: false,
          });
        }
      }
    );
  }

  private setCurrentPosition() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      });
    }
  }

  deleteSelectedShape() {
    if (this.selectedShape) {
      this.selectedShape.setMap(null);
      this.selectedArea = 0;
      this.pointList = [];
      // To show:
      this.drawingManager.setOptions({
        drawingControl: true,
        drawingMode: google.maps.drawing.OverlayType.POLYGON
      });
    }
  }

  updatePointList(path) {
    this.pointList = [];
    const len = path.getLength();
    for (let i = 0; i < len; i++) {
      this.pointList.push(
        path.getAt(i).toJSON()
      );
    }
    this.selectedArea = google.maps.geometry.spherical.computeArea(
      path
    );
  }





    downloadImage(){
      html2canvas(this.screen.nativeElement).then(canvas => {
        this.canvas.nativeElement.src = canvas.toDataURL();
        this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
        this.downloadLink.nativeElement.download = 'lista_klientow.png';
        this.downloadLink.nativeElement.click();
      });
    }
  }

和 HTML

<div class="mapContainer" *ngIf="clientList">
  <div>
    <button type="button" class="btn btn-dark" (click)="deleteSelectedShape()">Wyczyść rysowanie</button>
  </div>
  <div>
    <span> Selected Area: {{ selectedArea.toPrecision(5) }}m<sup>2</sup> </span>
    <span>Selected Clients : {{circledClients.length}}</span>
  </div>

  <div class="btn btn-primary" (click)="downloadImage()">Zrob Screen Mapy</div>
  <div #screen id="renderedArea">
  <agm-map class="map" [zoom] = "7" [latitude] ="lat" [longitude] ="lng"
    (mapReady)="onMapReady($event)"
    (boundsChange)="checkMarkersInBounds($event)"
    >

    <ng-container *ngFor= "let place of clientList,let i = index">
      <agm-marker [latitude]= "place.latitude" [longitude]= "place.longitude"
      [title] ="place.name" [iconUrl] = getUrlMarker(place.segment)
      (markerClick)="clickedMarker(place, i)"
      >
    <agm-info-window>
      <b>Kod klienta:</b> {{place.clientId}}
      <p><b>Nazwa:</b> {{place.name}}</p>
      <p><b>Miasto:</b> {{place.city}}</p>
      <p><b>Powiat:</b> {{place.province}}</p>
      <p><b>Segment:</b> {{place.segment}}</p>
      <p><b>PH:</b> {{place.ph}}</p>
    </agm-info-window>
    </agm-marker>
    </ng-container>
  </agm-map>
  </div>
  <div id="download">
    <img #canvas>
    <a #downloadLink></a>
  </div>
    <div *ngFor="let point of pointList">
      <div>{{ point.lat.toPrecision(5) }}, {{ point.lng.toPrecision(5) }}</div>
    </div>


</div>