Angular-google-maps: Markierungsinfofenster schließen, wenn ein neues angeklickt wird?

Ja, ich bin schon einmal auf dasselbe Problem gestoßen.

Hier ist das Arbeitsplunk
http://plnkr.co/edit/cwuwBN?p=preview

Ich konnte diesen Ansatz nicht verwenden.
Meine Lösung wurde von den Quellen heruntergeladen und enthält den folgenden Code in der Datei (google-map-info-window.ts):

// setze diese Eigenschaft in die oberste Datei, unten let infoWindowId = 0; (Zeile 7)
let infoWindowLastContext: SebmGoogleMapInfoWindow = null;

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

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}}

Ich hoffe das hilft...

Meine Lösung nur für Vorlagen:

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

Mit der neuen Version 1.0.0-beta.0 funktioniert Green-Zebra AOT nicht:
Die Eigenschaft 'lastOpen' ist für den Typ 'AgmMap' nicht vorhanden.

Was kann passieren?

Funktioniert hervorragend, meine Vorlagenverwendung ruft eine benutzerdefinierte Klickfunktion wie in auf

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

Hallo,

Selbst mit der @ Martin-B-Lösung funktioniert es nicht: /

Irgendeine Hilfe ?

@ Martin-B vielen Dank für die Lösung. Funktioniert ein Genuss!

@ Martin-B Schön danke!
@melbouhy Schande über mich; Ich habe vergessen, #infoWindow in <agm-info-window> hinzuzufügen. Vielleicht hast du den gleichen Fehler gemacht?

public openIW (data = undefined) {
if (this.IW) {
this.IW.close ();
}}

this.IW = data;

}}

@ Martin-B wie man das benutzt ((markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);") in agm-marker bitte mit .ts code antworten

@menakav Hier ist ein bearbeiteter Code:
in der .ts-Datei:
`
markerClicked (infoWindow) {
if (this.infoWindowOpened === infoWindow)
Rückkehr;

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

    this.infoWindowOpened = infoWindow;
}

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

@menakav Dein Code funktioniert bei mir nicht
:((

Ich habe alle Codes in diesem Forum getestet und mein Problem ist das hier erhaltene infoWindow :

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

infoWindow immer der erste, egal wie viele Punkte ich habe. Immer habe ich die infoWindow mit _id = 0 erhalten.

Der Parameter index erhält die wahre ID des angeklickten Markers ....

Das ist mein 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>

Irgendwelche Ideen, warum immer das gleiche infoWindow kommt?

Die "Nur Vorlage" -Lösung von @soyersoyer funktioniert hervorragend. Sobald jedoch das anfängliche Agm-Marker-Array durch neue Marker-Elemente ersetzt wird (z. B. nach dem Ajax-Update), werden die vorherigen Infofenster plötzlich nicht mehr automatisch geschlossen. Was könnte hier das Problem sein?

@markschmid meine
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

Meine Lösung, basierend auf der Antwort von @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

Können Sie erklären, wie Sie filter(){infoWindowOpened = null;} ausführen, ohne dass ein Fehler "infoWindowOpened kann nicht gefunden werden" als Fehler ausgegeben wird? Dies geschieht nach dem Ändern des Markierungssymbolarrays.

Ich habe das Problem gelöst.
Ich habe den Code geteilt:
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

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

Ich hoffe es hilft.

Vielen Dank.

Am Samstag, den 28. April 2018 um 02:04 Uhr meldete Cristian Hernandez [email protected]
schrieb:

Ich habe das Problem gelöst.
Ich habe den Code geteilt:
[Latitude] = "point.latitude" [longitude] = "point.longitude"
[iconUrl] = "iconUrl" (markerClick) = "clickedMarker (infoWindow, point,
point.latitude, point.longitude) "> [disableAutoPan] = "true" * ngIf = "! isDetailMovil">

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

Ich hoffe es hilft.

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Hier ist meine Lösung. Funktioniert mit Winkel 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>

Typoskript:

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

Nach langer Recherche und unklaren Lösungen bekam man endlich eine gute Lösung für ein klares vorheriges Agm-Info-Fenster, wenn ein neues geöffnet wird

Dies ist meine 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>

Und das ist meine Komponente.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
}

Jedes Mal, wenn ein neues Fenster geöffnet wird, erkennt es das Ereignis und schließt das vorherige. Dies funktioniert auch zum Schließen eines geöffneten Fensters, wenn der Benutzer in einem anderen Teil der Karte außerhalb des Fensters klickt

Danke @JimmyTheNerd , es hat bei mir funktioniert!

Meine Lösung, basierend auf der Antwort von @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;   
}

Danke @JimmyTheNerd , es

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivitäten gab. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.