我有一个带有谷歌地图的 angular 应用,我想截屏并将这张图片保存在我的电脑上。
不幸的是我的方法只取边框,我在这张图片上看不到地图。
怎么回事?
我在 stackoverflow 上找到了这篇文章:
html2canvas does not work with Google Maps Pan
但我不知道如何将其转换为打字稿。
这是我的代码:
我的 .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>