Angular-google-maps: Fermer les fenêtres d'informations sur les marqueurs lorsqu'un nouveau clique sur?

Ouais, j'ai déjà rencontré le même problème.

Voici le plan de travail
http://plnkr.co/edit/cwuwBN?p=preview

je ne pourrais pas utiliser cette approche.
Ma solution a téléchargé les sources et inclut le code suivant dans le fichier (google-map-info-window.ts):

// définit cette propriété dans le fichier supérieur, ci-dessous let infoWindowId = 0; (ligne 7)
laissez infoWindowLastContext: SebmGoogleMapInfoWindow = null;

open (): Promesse{
if (infoWindowLastContext! == null) {
this._infoWindowManager.close (infoWindowLastContext)
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

J'espère que ça aide...

Ma seule solution modèle:

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

Avec le nouveau 1.0.0-beta.0 - green-zebra AOT ne fonctionne pas:
La propriété 'lastOpen' n'existe pas sur le type 'AgmMap'

Que peut-il arriver?

Fonctionne très bien, mon utilisation du modèle appelle une fonction de clic personnalisée comme dans

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

Bonjour,

Même avec la solution @ Martin-B, cela ne fonctionne pas: /

De l'aide ?

@ Martin-B remercie beaucoup pour la solution. Fonctionne un régal!

@ Martin-B Nice thx!
@melbouhy Honte à moi; j'ai oublié d'ajouter #infoWindow dans <agm-info-window> . Peut-être avez-vous fait la même erreur?

public openIW (données = non définies) {
if (this.IW) {
this.IW.close ();
}

this.IW = data;

}

@ Martin-B comment utiliser ceci ((markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);") dans agm-marker veuillez répondre avec le code .ts

@menakav Voici un code travaillé:
dans le fichier .ts:
''
markerClicked (infoWindow) {
if (this.infoWindowOpened === infoWindow)
revenir;

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

    this.infoWindowOpened = infoWindow;
}

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

@menakav Votre code ne fonctionne pas pour moi
:(

J'ai testé tous les codes de ce forum, et mon problème est le infoWindow reçu ici:

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

infoWindow est toujours le premier, quel que soit le nombre de points que j'ai. J'ai toujours reçu le infoWindow avec _id = 0.

Le paramètre index reçoit le véritable ID du marqueur cliqué ....

Ceci est mon 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>

Des idées pourquoi vient toujours la même infoWindow?

La solution «modèle uniquement» de

@markschmid ma solution de contournement lorsque le tableau initial agm-marker est remplacé.
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

Ma solution, basée sur la réponse @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

Pouvez-vous expliquer comment vous exécutez filter(){infoWindowOpened = null;} sans qu'il ne lance un message d'erreur "Impossible de trouver infoWindowOpened"? Cela se produit après la modification du tableau des icônes de marqueur.

J'ai résolu le problème.
J'ai partagé le code:
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng: string) {
if (this.IW) {
this.IW.close ();
}
détails const = data._infoWindowManager._infoWindows;
if (details.size> 0) {
details.forEach ((élément, clé) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = clé;
}
});
}
}

J'espère que cela aidera.

Merci.

Le sam.28 avril 2018 à 02:04, Cristian Hernandez [email protected]
a écrit:

J'ai résolu le problème.
J'ai partagé le code:
[latitude] = "point.latitude" [longitude] = "point.longitude"
[iconUrl] = "iconUrl" (markerClick) = "clickedMarker (infoWindow, pointez,
point.latitude, point.longitude) "> [disableAutoPan] = "true" * ngIf = "! isDetailMovil">

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

J'espère que cela aidera.

-
Vous recevez cela parce que vous avez été mentionné.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Voici ma solution. Fonctionne avec angulaire 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>

Manuscrit:

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

Après une longue recherche et des solutions peu claires, nous avons finalement obtenu une bonne solution pour effacer la fenêtre d'information précédente agm quand une nouvelle est ouverte

Ceci est mon composant.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>

Et voici mon 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
}

Ainsi, chaque fois qu'une nouvelle fenêtre sera ouverte, elle détectera l'événement et fermera le précédent, cela fonctionne également pour fermer une fenêtre ouverte si l'utilisateur clique en dehors de la fenêtre dans une autre partie de la carte

Merci @JimmyTheNerd , cela a fonctionné pour moi!

Ma solution, basée sur la réponse @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;   
}

Merci @JimmyTheNerd ,

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.