我从数据库中读取一些标记和渲染他们使用Google-maps
标签<agm-marker>
。
这是我读标记,并将其推入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>
我需要使用户能够通过按下一个按钮来清除所有标记,这意味着[visible]
的<agm-marker>
属性应设置为False每个标记。我怎样才能从component.ts
文件中访问标记和改变呢?
是否有任何其他方式清除所有的标记从角的地图?
我不能在网上找到任何:(
谢谢
我没有完全搞定的问题,但我认为你需要的是:
...
<agm-marker id="display-markers"
...
[visible]="isMarkersVisible"
...
</agm-marker>
...
<button (click)="toggleMarkers()">{{isMarkersVisible ? "Hide" : "Show"}}</button>
...
...
isMarkersVisible = true;
...
ngOnInit(): void { ... }
...
toggleMarkers(): void {
this.isMarkersVisible = !this.isMarkersVisible;
}
...
希望帮助。