使用角度地图@agm关闭上一个信息窗口

Question

我问了一个很多人问的问题，但没有人给出明确的答案，几乎在AGM（谷歌地图的Angular 2包）

这是我的代码，但我的第一个打开的标记不想关闭，其他标记关闭了一半的时间

clickedMarker(marker: Marker, infoWindow, index: number) {
   if (this.infoWindow && this.infoWindow !== infoWindow) {
      this.infoWindow.close();
    }
    this.infoWindow = infoWindow;
}

有人可以帮助我解决这个关闭问题，使用关闭功能或事件发射器 https://angular-maps.com/api-docs/agm-core/components/AgmInfoWindow.html#source

感谢您的时间和帮助;)

编辑：找到答案

我让我的<agm-info-window #infoWindow>使用<a *ngIf="myCondition"..>{{address}}</a>显示多个信息，但当条件再次评估为 true 时，它似乎没有呈现弹出窗口。

我用<a [class.hidden]="!myCondition">..</a>替换了它，它修复了标记的多个显示。

另一个好的做法是在点击地图时关闭，如果打开就关闭它：

clickedMap($event) {
   if (this.infoWindow) {
      this.infoWindow.close();
   }
}

将来可能会有所帮助...谁知道呢？

Answer 1

经过长时间的研究和不清楚的解决方案，终于得到了一个很好的解决方案，可以在打开新的 agm 信息窗口时清除以前的 agm 信息窗口

这是我的组件.html：

 <agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
     <div *ngFor="let data of zonas">
        <agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
           <agm-info-window #infoWindow >            
           </agm-info-window>
         </agm-marker>
      </div>
  </agm-map>

这是我的组件.ts：

constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
  this.previous_info_window.close()
  }    
}
select_marker(data,infoWindow){
 if (this.previous_info_window == null)
  this.previous_info_window = infoWindow;
 else{
  this.infoWindowOpened = infoWindow
  this.previous_info_window.close()
 }
 this.previous_info_window = infoWindow
}

因此，每次打开新窗口时，它都会检测事件并关闭前一个窗口，如果用户在地图的任何其他部分中单击窗口外，这也可用于关闭打开的窗口

Answer 2

<agm-map (mapClick)="mapClick($event)">
<agm-marker (markerClick)=markerClick(iw)>
<agm-info-window  #iw>

  currentIW: AgmInfoWindow;
  previousIW: AgmInfoWindow;
constructor(){
  this.currentIW = null;
  this.previousIW = null;
}
// other functions
mapClick() {
    if (this.previousIW) {
      this.previousIW.close();
    }
}
markerClick(infoWindow) {
    if (this.previousIW) {
      this.currentIW = infoWindow;
      this.previousIW.close();
    }
    this.previousIW = infoWindow;
}

Answer 3

最简单的方法是在agm-info-window中使用isOpen属性。这是一个boolean.让我知道你们是否需要一个完整的示例

<agm-info-window [isOpen]="markerSelectIndex === index">

Answer 4

一个更干净的解决方案是将$event参数传递给<agm-marker (markerClick)=markerClick($event)。此$event将被视为AgmMarker，并包含 QueryList 中的InfoWindow（如果有）。

class YourComponent {
  previousInfoWindow: AgmInfoWindow;
  markerClicked(agmMarker: AgmMarker): void {
    this.previousInfoWindow?.close();
    
    if (agmMarker.infoWindow.length) {
      this.previousInfoWindow = agmMarker.infoWindow.first as AgmInfoWindow;
    }
  }
  mapClicked(): void {
    this.previousInfoWindow?.close();
  }
}

<agm-map (mapClick)="mapClicked()">
  <agm-marker (markerClick)="markerClicked($event)">
     <agm-info-window></agm-info-window>
   </agm-marker>
 </agm-map>