Angular 如何仅在AGM循环中列出标记？

我正在使用角度、角度谷歌地图（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>

在这种情况下，它应该向我展示欧洲的标志

谢谢你的帮助