Angular-google-maps: Fechar as janelas de informações do marcador quando um novo for clicado?

Sim, já encontrei o mesmo problema antes.

Aqui está o plunk de trabalho
http://plnkr.co/edit/cwuwBN?p=preview

eu não poderia usar essa abordagem.
Minha solução foi baixada das fontes e inclui o seguinte código no arquivo (google-map-info-window.ts):

// define esta propriedade no arquivo superior, abaixo let infoWindowId = 0; (linha 7)
deixe infoWindowLastContext: SebmGoogleMapInfoWindow = null;

abrir (): Promessa{
if (infoWindowLastContext! == null) {
this._infoWindowManager.close (infoWindowLastContext)
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

Eu espero que isso ajude...

Minha solução apenas para o modelo:

<sebm-google-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <sebm-google-map-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </sebm-google-map-info-window>
</sebm-google-map-marker>

@soyersoyer @lazarljubenovic

<agm-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <agm-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </agm-info-window>
</agm-marker>

Com o novo 1.0.0-beta.0 - green-zebra AOT não está funcionando:
A propriedade 'lastOpen' não existe no tipo 'AgmMap'

O que pode acontecer?

Funciona muito bem, meu uso de modelo invoca uma função de clique personalizada como em

(markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"

Olá,

Mesmo com a solução @ Martin-B, não funciona: /

Qualquer ajuda ?

@ Martin-B agradece muito pela solução. Funciona muito bem!

@ Martin-B Legal, obrigado!
@melbouhy Shame on me; esqueci de adicionar #infoWindow em <agm-info-window> . Talvez você tenha cometido o mesmo erro?

openIW público (dados = indefinido) {
if (this.IW) {
this.IW.close ();
}

this.IW = data;

}

@ Martin-B como usar isto ((markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);") em agm-marker por favor responda com o código .ts

@menakav Aqui está um código funcional:
no arquivo .ts:
`
marcadorClicked (infoWindow) {
if (this.infoWindowOpened === infoWindow)
Retorna;

    if(this.infoWindowOpened !== null)
    {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;
}

in .html file: (markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);" `

@menakav Seu código não funciona para mim
:(

Testei todos os códigos neste fórum e meu problema é o infoWindow recebido aqui:

  clickedMarker(infoWindow, index: number) {
    ...
  }

infoWindow sempre é o primeiro, não importa quantos pontos eu tenha. Sempre recebi infoWindow com _id = 0.

O parâmetro index recebe o verdadeiro ID do marcador clicado ....

Este é o meu html:

<agm-marker *ngFor="let point of points; let i = index" [latitude]="point.latitude"
                            [longitude]="point.longitude"
                            [iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, i)">
<agm-info-window [disableAutoPan]="true" #infoWindow *ngIf="!isDetailMovil">
        <div class="marker__tittle">{{point.name}}</div>

Alguma idéia de por que sempre vem a mesma infoWindow?

A solução "somente modelo" de

@markschmid minha solução alternativa quando a matriz inicial do marcador
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

Minha solução, baseada na resposta @lauwrentius :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

@JimmyTheNerd

Você pode explicar como está executando filter(){infoWindowOpened = null;} sem lançar um 'não é possível encontrar infoWindowOpened' como um erro? Isso ocorre após alterar a matriz do ícone do marcador.

Eu resolvi o problema.
Eu compartilhei o código:
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng: string) {
if (this.IW) {
this.IW.close ();
}
detalhes const = data._infoWindowManager._infoWindows;
if (details.size> 0) {
details.forEach ((elemento, chave) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = chave;
}
});
}
}

Espero que ajude.

Obrigada.

No sábado, 28 de abril de 2018 às 02:04, Cristian Hernandez [email protected]
escrevi:

Eu resolvi o problema.
Eu compartilhei o código:
[latitude] = "point.latitude" [longitude] = "point.longitude"
[iconUrl] = "iconUrl" (markerClick) = "clickedMarker (infoWindow, apontar,
point.latitude, point.longitude) "> [disableAutoPan] = "true" * ngIf = "! isDetailMovil">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng:
string) {if (this.IW) {this.IW.close (); } const detalhes =
data._infoWindowManager._infoWindows; if (details.size> 0) {
details.forEach ((elemento, chave) => {if (key.hostMarker.latitude === lat &&
key.hostMarker.longitude === lng) {this.IW = chave; }}); }}

Espero que ajude.

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Aqui está minha solução. Funciona com angular 6.
HTML:

<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude"[longitude]="marker.longitude" (markerClick)="markerClick(infoWindow)">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>

TypeScript:

lastSelectedInfoWindow: any;
markerClick(infoWindow: any) {
        if (infoWindow == this.lastSelectedInfoWindow) {
            return;
        }
        if (this.lastSelectedInfoWindow != null) {
         try{
            this.lastSelectedInfoWindow.close();
          } catch {} //in case if you reload your markers
        }
        this.lastSelectedInfoWindow = infoWindow;
    }

Depois de uma longa pesquisa e soluções pouco claras, finalmente conseguiu uma boa solução para limpar a janela anterior do agm-info quando uma nova for aberta

Este é meu 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>

E este é meu 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
}

Portanto, toda vez que uma nova janela for aberta detectará o evento e fechará a anterior, também está funcionando para fechar uma janela aberta se o usuário clicar fora da janela em qualquer outra parte do mapa

Obrigado @JimmyTheNerd , funcionou para mim!

Minha solução, baseada na resposta @lauwrentius :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

Obrigado @JimmyTheNerd ,

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.