如何在agm-map中创建goefencing。我需要拖动地理围栏的点,并且需要保存按钮操作中所有点的纬度对数坐标。
这是我的html。
HTML
<agm-map
[latitude]="lat" [longitude]="lng" [zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"
[markerDraggable]="m.draggable"
(dragEnd)="markerDragEnd(m, $event)">
<agm-info-window>
<strong>InfoWindow content</strong>
</agm-info-window>
</agm-marker>
</agm-map>
请找到包含三个不同纬度和经度的ts文件。 我需要对这些坐标进行地理隔离。
TypeScript
import { Component } from '@angular/core';
import { MouseEvent } from '@agm/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
zoom: number = 8;
lat: number = 51.673858;
lng: number = 7.815982;
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label || index}`)
}
mapClicked($event: MouseEvent) {
this.markers.push({
lat: $event.coords.lat,
lng: $event.coords.lng,
draggable: true
});
}
markerDragEnd(m: marker, $event: MouseEvent) {
}
markers: marker[] = [
{
lat: 51.673858,
lng: 7.815982,
label: 'A',
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: 'B',
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: 'C',
draggable: true
}
]
}
interface marker {
lat: number;
lng: number;
label?: string;
draggable: boolean;
}