使用Angular Map @agm关闭先前的infoWindow

and*_*590 7 google-maps angular

我在问一个很多人问的问题,但是几乎没有人在AGM上给出清晰的答案(Google地图的Angular 2软件包)

这是我的代码,但是我的第一个打开的标记不想关闭,而其他标记则关闭一半

clickedMarker(marker: Marker, infoWindow, index: number) {

   if (this.infoWindow && this.infoWindow !== infoWindow) {
      this.infoWindow.close();
    }
    this.infoWindow = infoWindow;
}
Run Code Online (Sandbox Code Playgroud)

有人可以使用关闭功能或事件发射器帮助我解决此关闭问题吗?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();
   }
}
Run Code Online (Sandbox Code Playgroud)

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

Gab*_*cuy 7

经过长时间的研究和不明确的解决方案,终于有了一个好的解决方案,可以在打开新的agm-info-window时对其进行清除

这是我的component.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>
Run Code Online (Sandbox Code Playgroud)

这是我的component.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
}
Run Code Online (Sandbox Code Playgroud)

因此,每次打开一个新窗口时,它都会检测到该事件并关闭上一个事件,如果用户在地图的任何其他部分单击窗口之外,这也将关闭已打开的窗口


小智 5

<agm-map (mapClick)="mapClick($event)">
<agm-marker (markerClick)=markerClick(iw)>
<agm-info-window  #iw>
Run Code Online (Sandbox Code Playgroud)

  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;
}


Run Code Online (Sandbox Code Playgroud)