在角度为4的agm地图中设置地理围栏?

时间:2018-12-05 09:47:55

标签: angular

如何在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;
 }

0 个答案:

没有答案