Question

我正在使用Angular，Angular Google Maps（agm）和Firebase在地图上列出一些标记。当我尝试列出我从数据库中获取的所有标记时，我没有问题。我还在地图上使用agm圆圈。我想使标记在此圆圈内可见，如果在圆圈外则不可见。

这是我的组件：

import { Component, OnInit, NgModule } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor(private db: AngularFirestore) { }

  allMarkers: any;
  lat = 40.927784;
  lng = 29.130245;
  latInput: number;
  longInput: number;
  zoom = 4;
  minZoom = 2.5;
  circleDragEnd() {
    console.log('It\'s alive!');
  }
  mapClicked($event) {
    this.latInput = $event.coords.lat;
    this.longInput = $event.coords.lng;
  }
  addMarker() {
    this.db.collection('/markers').add({ lat: this.latInput, long: this.longInput });
  }
  ngOnInit() {
    this.allMarkers = this.db.collection('/markers').valueChanges();
  }

}

这是我的html：

<agm-map (mapClick)="mapClicked($event)" [zoom]="4" [minZoom]="2.5" [latitude]="40.927784" [longitude]="29.130245">

  <agm-marker *ngFor="let marker of allMarkers | async" [latitude]="marker.lat" [longitude]="marker.long">
    <agm-info-window>
      <div [innerHTML]="marker.description"></div>
    </agm-info-window>
  </agm-marker>

  <agm-circle [latitude]="lat" [longitude]="lng" [radius]="500000" [fillColor]="'purple'" [circleDraggable]="true"
[editable]="true" (dragEnd)="circleDragEnd()">
  </agm-circle>
</agm-map>
<input id="latitude" name="latitude" [(ngModel)]="latInput" type="text" placeholder="latitude">
<input id="longitude" name="longitude" [(ngModel)]="longInput" type="text" placeholder="longitude"><br>
<button (click)="addMarker()">Add Marker!</button>

我的主页的屏幕截图：

Screenshot

在这种情况下，它应该向我显示欧洲的标记。

感谢您的帮助！

如何仅在AGM Circle中列出标记？

0 个答案: