[Angular google-maps API]：有没有办法从 typescript 代码中更改 <agm-marker> 属性？

Question

我正在从数据库中读取一些标记，并使用 <agm-marker> 标签将它们呈现在 Google-maps 上。

这是我读取标记并将它们推入 markers 数组 (componentName.component.ts) 的代码部分：

 ngOnInit(): void {


this.markerService.fetchMarkers()

this.markerService.markersSubject.subscribe(markers => {

  markers.forEach(marker => {

    this.markers.push({
      lat: marker.latitude,
      lng: marker.longitude,
      title: marker.title,
      story: marker.story,
      path: marker.img_path
    })

  })

})

    } //onInit

和呈现标记的 Html：

    <agm-map
    [latitude]="latitude"
    [longitude]="longitude"
    [zoom]="zoom"
    [disableDefaultUI]="false"
    [streetViewControl]="false"
    [zoomControl]="false"
    [mapTypeControl]="false"
    [mapTypeId]="'terrain'"
    > 

    <agm-marker id="display-markers"
     *ngFor="let m of markers; let i = index"
      (markerClick)="openModal('marker-content' + i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [markerDraggable]="m.draggable"
      [iconUrl]="m.icon" 
      [visible]="true"
      [id]="i"
    </agm-marker>

   </agm-map>

我需要使用户能够通过按下按钮清除所有标记，这意味着 <agm-marker> 的 [visible] 属性应该为每个标记设置为 False。如何从 component.ts 文件中访问标记并更改它？

有没有其他方法可以清除 Angular 中地图上的所有标记？

我在网上找不到任何东西:(

感谢

Answer 1

我没有完全理解问题，但我认为你需要：

Html 模板

...
<agm-marker id="display-markers"
  ...
  [visible]="isMarkersVisible"
  ...
</agm-marker>
...
<button (click)="toggleMarkers()">{{isMarkersVisible ? "Hide" : "Show"}}</button>
...

Ts文件

...
isMarkersVisible = true;
...
ngOnInit(): void { ... }
...
toggleMarkers(): void {
  this.isMarkersVisible = !this.isMarkersVisible;
}
...

希望对您有所帮助。

[Angular google-maps API]：有没有办法从 typescript 代码中更改 <agm-marker> 属性？

[Angular google-maps API]: Is there a way to change <agm-marker> atteributes from inside the typescript code?

google-maps-markers

typescript

angular

Html 模板

Ts文件